大家都能看懂的 canvas基础教程

师徒课堂
关注文章
TinyMind专栏频道

原文链接:http://www.shitu91.com/cms/canvasSub/index.html

01.canvas简单的认识

canvas 是html5提供给我们的一个绘图标签 默认大小 300X150 背景透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas简单的认识</title>
</head>
<body>
    <canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:20px auto;"></canvas>

</body>
</html>

效果图 如下查看案例

02.绘制 一个带有填充颜色的 矩形相关代码

        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");

        cxt.fillStyle="#f0f";
        cxt.fillRect(50,50,200,100);

效果图 如下查看案例

03.画线

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");
        //画三角形
        cxt.moveTo(50,50);
        cxt.lineTo(250,100);
        cxt.lineTo(50,200);
        cxt.lineTo(50,50);

        //画直线
        cxt.moveTo(350,50);
        cxt.lineTo(350,200);

        //定义画线样式
        cxt.strokeStyle="red";
        cxt.lineWidth="5";

        cxt.lineCap="round";

        cxt.stroke();

效果图 如下查看案例

04.画矩形

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");
        //方法一

        cxt.moveTo(100,50);
        cxt.lineTo(300,50);
        cxt.lineTo(300,200);
        cxt.lineTo(100,200);
        cxt.lineTo(100,50);
        cxt.fill();
        //cxt.stroke();

        //方法二
        // /cxt.strokeStyle="red";
        cxt.fillStyle="red";
        cxt.fillRect(0,0,300,40);
        //cxt.strokeRect(0,0,300,40);

    </script>

效果图 如下查看案例

05.路径的开始与关闭

    <script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");
        //方法一

        cxt.moveTo(100,50);
        cxt.lineTo(300,50);
        cxt.lineTo(300,200);
        cxt.lineTo(100,200);
        cxt.lineTo(100,50);
        cxt.fill();

        //cxt.stroke();

        //方法二
        //cxt.strokeStyle="red";
        //cxt.strokeRect(0,0,300,40);

        cxt.fillStyle="red";
        cxt.fillRect(0,0,300,40);

效果图 如下查看案例

06.canvas 画圆 画弧

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");
        //空心圆
        cxt.beginPath()
            cxt.arc(250,150,100,0,Math.PI*2);
        cxt.closePath();
        cxt.stroke();

        //空心圆
        cxt.beginPath()
            cxt.arc(250,150,50,0,Math.PI*2);
        cxt.closePath();
        cxt.fill();

        //弧度
        cxt.beginPath()
            cxt.arc(250,150,130,Math.PI*3/2,Math.PI,true);
            cxt.stroke();
        cxt.closePath();

效果图 如下查看案例

07.canvas 添加图片 添加文字

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");

        //添加图片
        var img=new Image();
        img.src="images/meizi.jpg";
        img.onload=function(){
            cxt.drawImage(img,85,40);
        }

        //添加文字
        cxt.font="30px Arial";

        cxt.fillStyle="red";
        cxt.fillText("我女朋友",380,290);

        cxt.strokeStyle="red";
        cxt.strokeText("我女朋友",380,290);

效果图 如下查看案例

08.canvas 橡皮擦 物体运动(本质是图形不断的擦除与绘制)

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");

        //圆
        var x=10,y=10;
        var a=490,b=290;
        var duration=2000;
        var cishu=2000/30;
        var xstep=(a-x)/cishu;
        var ystep=(b-y)/cishu;


        function huayuan(x,y){
            cxt.beginPath();
            cxt.arc(x,y,10,0,Math.PI*2);
            cxt.fillStyle="red";
            cxt.fill();
        }

        huayuan();
        var timer=setInterval(function(){
             //橡皮擦
            cxt.clearRect(x-11,y-11,22,22);

            x+=xstep;
            y+=ystep;

            if(x>=a){
                x=a;
                y=b;
            }
            huayuan(x,y);

        },30);

效果图 如下查看案例

09. canvas 鼠标画笔

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";

        var cxt=myCanvas.getContext("2d");

        var canvaL=myCanvas.offsetLeft;
        var canvaT=myCanvas.offsetTop;


        myCanvas.onmousedown=function(e){
            var ev=e||window.event;
            var left=ev.clientX;
            var top=ev.clientY;
            var x=left-canvaL;
            var y=top-canvaT;

            cxt.moveTo(x,y);
            myCanvas.onmousemove=function(e){
                var ev=e||window.event;
                var left=ev.clientX;
                var top=ev.clientY;
                var x=left-canvaL;
                var y=top-canvaT;
                cxt.lineTo(x,y);

                cxt.stroke();


            }

            myCanvas.onmouseup=function(){
                myCanvas.onmouseup=null;
                myCanvas.onmousemove=null;
            }
            myCanvas.onmouseout=function(){
                myCanvas.onmouseup=null;
                myCanvas.onmousemove=null;
                myCanvas.onmouseout=null;
            }


        }

效果图 如下查看案例

10.canvas 渐变线性渐变

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";
        var ctx=myCanvas.getContext("2d");

        //创建线性渐变对象
        var lg=ctx.createLinearGradient(10,10,210,110);
        lg.addColorStop(0,"red");
        lg.addColorStop(1,"blue");

        //带线性渐变矩形
        ctx.fillStyle=lg;
        ctx.fillRect(10,10,200,100);

        //带线性渐变圆
        var lg1=ctx.createLinearGradient(80,130,140,200);
        lg1.addColorStop(0,"green");
        lg1.addColorStop(1,"yellow");

        ctx.beginPath();
        ctx.arc(105,160,50,0,Math.PI*2);
        ctx.fillStyle=lg1;
        ctx.fill();
        ctx.closePath();

    </script>

效果图 如下查看案例

11.canvas 渐变之径向渐变

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";
        var ctx=myCanvas.getContext("2d");

        //创建径向渐变对象
        var rg=ctx.createRadialGradient(110,110,1,110,110,110);

        rg.addColorStop(0,"#f00");
        rg.addColorStop(0.5,"rgb(238,182,231)");
        rg.addColorStop(1,"blue");

        //带径向渐变矩形
        ctx.fillStyle=rg;
        ctx.fillRect(10,10,200,200);

        //创建径向渐变的圆

        var rg1=ctx.createRadialGradient(310,61,1,310,111,100);
        rg1.addColorStop(0,"#fff");
        rg1.addColorStop(1,"black");

        ctx.beginPath();
        ctx.arc(310,111,100,0,Math.PI*2);
        ctx.fillStyle=rg1;
        ctx.fill();
        ctx.closePath();

    </script>

效果图 如下查看案例

12.canvas 填充--图案

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";
        var ctx=myCanvas.getContext("2d");

        var img=new Image();
        img.src="images/flower.jpg";

        img.onload=function(){
            var tuan=ctx.createPattern(img,"repeat");

            ctx.fillStyle=tuan;
            ctx.fillRect(0,0,500,300);
        }
    </script>

效果图如下:查看案例

13.canvas 图片 之深入谈

<script>
        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width="500";
        myCanvas.height="300";
        var ctx=myCanvas.getContext("2d");

        //画图 女汉子
        var nvhanziImg=new Image();
        nvhanziImg.src="images/nvhanzi.jpg";
        nvhanziImg.onload=function(){

            //ctx.drawImage(nvhanziImg,dx,dy,dw,dh);

            ctx.drawImage(nvhanziImg,225,125,50,50);
        }


        //2 画精灵图片
        // source源  destination 目标地
        var nvjingli=new Image();
        nvjingli.src="images/jinglingnvhai.jpg";
        var nv2={
                x:82,
                y:0,
                w:84,
                h:110
        };


        nvjingli.onload=function(){

        //语法 ctx.drawImage(nvjingli,s.x,s.y,s.w,s.h,d.x,d.y,d.w,d.h);

        ctx.drawImage(nvjingli,nv2.x,nv2.y,nv2.w,nv2.h,0,0,nv2.w/2,nv2.h/2);


        }

        //3.圣诞老人驾车
        var shengdanP=[
            {
                    x:0,
                    y:0,
                    w:220,
                    h:80
            },
            {
                    x:220,
                    y:0,
                    w:220,
                    h:80
            },
            {
                    x:440,
                    y:0,
                    w:220,
                    h:80
            },
            {
                    x:660,
                    y:0,
                    w:220,
                    h:80
            },
        ];
        var shengdanImg=new Image();
        shengdanImg.src="images/christmas.jpg";

        shengdanImg.onload=function(){

            setInterval(pao,100);
        }


        var index=0;
        function pao(){
            if(index==shengdanP.length){
                index=0;
            }
            var sx=shengdanP[index].x;
            var sy=shengdanP[index].y;
            var sw=shengdanP[index].w;
            var sh=shengdanP[index].h;

            ctx.drawImage(shengdanImg,sx,sy,sw,sh,10,125,sw*2/3,sh*2/3);
            index++;

        }

    </script>

效果图 如下查看案例

14.canvas save && restore

保存或者恢复 canvas 里的状态 (填充，描边，渐变，坐标位移,裁切)

<script>

        var myCanvas=document.getElementById("myCanvas");

        myCanvas.width="500";
        myCanvas.height="300";
        var ctx=myCanvas.getContext("2d");

        var lg=ctx.createLinearGradient(200,100,250,200);
        lg.addColorStop(0,"red");
        lg.addColorStop(1,"blue");

        ctx.strokeStyle="red";
        ctx.strokeRect(0,0,50,100);
        ctx.save();

        ctx.fillStyle=lg;
        ctx.strokeStyle="blue";
        ctx.strokeRect(100,10,50,100);
        ctx.save();

        ctx.restore();
        ctx.restore();
        ctx.strokeRect(200,10,50,100);
        ctx.fillRect(200,100,50,100);

    </script>

效果图如下 你是否能理解下面的绘制呢？查看案例

;

15.canvas 坐标操作 移动(translate) 旋转(rotate) 缩放(scale)

为了不影响canvas里其它的对象，我们在进行坐标变换前,先保存一下canvas状态 做完变换操作以后恢复原状态

   <script>

        var drawRect=document.getElementById("drawRect");


        myCanvas.width="500";
        myCanvas.height="300";
        var ctx=myCanvas.getContext("2d");


        //绘制球
        var x=0,y=0;
        setInterval(function(){
            ctx.save();

            ctx.clearRect(x-11,y-11,22,22);

            x+=5;
            y+=5;
            ctx.translate(x,y);


            ctx.beginPath();
            ctx.arc(0,0,10,0,2*Math.PI,false);
            ctx.stroke();
            ctx.closePath();

            ctx.restore();

        },100);

    </script>

效果图如下查看案例

16.像素操作

    <canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:auto">
    </canvas>
    <canvas id="myCanvas2" style="border:1px solid red;display:block;margin:auto">
    </canvas>

 <script>

        var myCanvas=document.getElementById("myCanvas");
        var myCanvas2=document.getElementById("myCanvas2");

        myCanvas2.width=myCanvas.width="500";
        myCanvas2.height=myCanvas.height="300";

        var ctx=myCanvas.getContext("2d");
        var ctx2=myCanvas2.getContext("2d");

        ctx.fillRect(10,10,200,100);
        ctx.beginPath();
        ctx.arc(200,100,50,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle="red";
        ctx.fill();

        var imgData=ctx.getImageData(0,0,500,300);
        ctx2.putImageData(imgData,0,0);

    </script>

效果图如下查看案例

16.canvas像素操作_补充

    <div style="width:300px;margin:auto">
        原图
        <img src="images/twodog.jpg" alt="">
        canvas处理后
    </div>
    <canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:auto">
    </canvas>

<script>
        var CANVAS_WIDTH=300;
        var CANVAS_HEIGHT=200;

        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width=CANVAS_WIDTH;
        myCanvas.height=CANVAS_HEIGHT;


        var ctx=myCanvas.getContext("2d");

        var img=new Image();
        img.src="images/twodog.jpg";
        img.onload=function(){
            ctx.drawImage(img,0,0,CANVAS_WIDTH,CANVAS_HEIGHT);


            var imgData=ctx.getImageData(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
            var pixcelNums=CANVAS_WIDTH*CANVAS_HEIGHT;
            for(var i=0;i<pixcelNums;i++){
                imgData.data[i*4+0]=0;
                /*imgData.data[i*4+1]=0;
                imgData.data[i*4+2]=0;
                imgData.data[i*4+3]=0;*/
            }

            ctx.putImageData(imgData,0,0);
        }

    </script>

效果图如下:查看案例

17.canvas 阴影

说明属性
阴影偏移 shadowOffsetX,shadowOffsetY
阴影颜色 shadowColor
阴影模糊 shadowBlur 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 阴影  </title>
    <style>
         canvas{box-shadow: 0px 0px 10px #f00; } 
    </style>
</head>
<body>
    <canvas id="myCanvas" style="border:1px solid #ddd;display:block;margin:auto">
    </canvas>
</body>
</html>

<script>
        var CANVAS_WIDTH=300;
        var CANVAS_HEIGHT=200;

        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width=CANVAS_WIDTH;
        myCanvas.height=CANVAS_HEIGHT;

        var ctx=myCanvas.getContext("2d");

        var img=new Image();
        img.src="images/twodog.jpg";
        img.onload=function(){
            ctx.shadowColor="#222";
            ctx.shadowBlur="10";
            ctx.shadowOffsetX="5";
            ctx.shadowOffsetY="5";

            ctx.drawImage(img,(CANVAS_WIDTH-200)/2,(CANVAS_HEIGHT-100)/2,200,100);
        }

    </script>

效果图如下查看案例

;

18.canvas 裁剪

设置好裁剪路径 之后绘制的图形 只能显示裁剪路径里面的

<script>
        var CANVAS_WIDTH=300;
        var CANVAS_HEIGHT=200;

        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width=CANVAS_WIDTH;
        myCanvas.height=CANVAS_HEIGHT;

        var ctx=myCanvas.getContext("2d");

        ctx.beginPath();
        ctx.arc(150,100,80,0,2*Math.PI);
        ctx.closePath();

        var guniang=new Image();
        guniang.src="images/guniang.jpg";
        guniang.onload=function(){
            ctx.save();
            ctx.clip();
            ctx.drawImage(guniang,50,0,200,200);
            ctx.restore();

        }

        ctx.fillText("女朋友",250,150,50,50);

    </script>

效果图如下查看案例

19.canvas 图片保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 图片保存  </title>

</head>
<body>
    <div style="width:900px;text-align: center;margin:0 auto;">
        图片
        <img id="tupian" src="" alt="图片暂时没有" style="vertical-align: middle">
        <br/>
        canvas
        <canvas style="vertical-align: middle" id="myCanvas" style="border:1px solid #ddd;margin:auto">
        </canvas>
    </div>

</body>
</html>

 <script>
        var CANVAS_WIDTH=300;
        var CANVAS_HEIGHT=200;

        var myCanvas=document.getElementById("myCanvas");
        var tupian=document.getElementById("tupian");
        myCanvas.width=CANVAS_WIDTH;
        myCanvas.height=CANVAS_HEIGHT;

        var ctx=myCanvas.getContext("2d");

        var guniang=new Image();
        guniang.src="images/huaituzi.jpg";
        guniang.onload=function(){

            ctx.drawImage(guniang,50,40,200,119);
            ctx.moveTo(0,0);
            ctx.lineTo(CANVAS_WIDTH,CANVAS_HEIGHT);
            ctx.stroke();

            var dataStr=myCanvas.toDataURL();
            tupian.src=dataStr;
            //location.href=dataStr;
        }
    </script>

效果图如下查看案例

20.图形组合

调节透明度 globalAlpha

单词 destionation source

globalCompositeOperation 图形组合操作

值说明
source-over 目标图像上显示源图像。
destination-over 源图像上方显示目标图像。
source-atop 目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的
destination-atop 源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
xor 使用异或操作对源图像与目标图像进行组合。 
<script>
        var CANVAS_WIDTH=300;
        var CANVAS_HEIGHT=300;

        var myCanvas=document.getElementById("myCanvas");
        myCanvas.width=CANVAS_WIDTH;
        myCanvas.height=CANVAS_HEIGHT;

        //ctx.globalAlpha=0.5;

        var compositeArr=[
            "source-over","destination-over",
            "source-atop","destination-atop",
            "destination-in","source-in",
            "source-out","destination-out",
            "lighter","copy","xor"
        ];


        var i=0,l=compositeArr.length;
        draw(compositeArr[i]);

        setInterval(function(){
            i++;
            if(i==l){
                i=0;
            }
            draw(compositeArr[i]);


        },1000);



        function draw(type){
            var ctx=myCanvas.getContext("2d");

            ctx.clearRect(0,0,300,300);


            ctx.fillStyle="blue";
            ctx.fillRect(0,0,100,100);

            ctx.globalCompositeOperation=type;

            ctx.beginPath();
                ctx.arc(100,100,100,0,Math.PI*2);
                ctx.fillStyle="red";
                ctx.fill();
            ctx.closePath();

            ctx.globalCompositeOperation="source-over";

            ctx.font="30px Arial";
            ctx.strokeText(compositeArr[i],0,250);


        }

    </script>

效果图如下查看案例

21. canvas 事件操作

isPointInPath(x,y) 判断坐标为x,y的点是否再当前路径

            <script>
        var CANVAS_WIDTH=300;
        var CANVAS_HEIGHT=300;

        var myCanvas=document.getElementById("myCanvas");

        myCanvas.width=CANVAS_WIDTH;
        myCanvas.height=CANVAS_HEIGHT;

        var huabi=myCanvas.getContext("2d");

        huabi.fillRect(10,10,100,100);
        huabi.strokeStyle="red";
        huabi.strokeRect(110,110,100,100);

        function drawCircle(){
            huabi.beginPath();
            huabi.arc(160,60,50,0,Math.PI*2);
            huabi.stroke();
            huabi.closePath();
        }

        drawCircle();

        function drawSanjiao(){
            huabi.beginPath();
            huabi.moveTo(60,110);
            huabi.lineTo(110,210);
            huabi.lineTo(10,210);
            huabi.lineTo(60,110);
            huabi.stroke();
            huabi.closePath();
        }
        drawSanjiao();

        myCanvas.onclick=function(event){
            var e=event||window.event;

            var x=e.clientX-myCanvas.offsetLeft;
            var y=e.clientY-myCanvas.offsetTop;

            if(x>=10&&x<=110&&y>=10&&y<=110){
                alert("你点中了黑色矩形");
            }else if(x>=110&&x<=210&&y>=110&&y<=210){
                alert("你点中了红色矩形");
            }else{
                drawCircle();
                if(huabi.isPointInPath(x,y)){
                    alert("你点击了圆圈");
                }
                drawSanjiao();
                if(huabi.isPointInPath(x,y)){
                    alert("你点击了三角");
                }

            }

        }

    </script>

效果图如下查看案例

优质内容筛选与推荐>>
1、Mysql的数据类型 6种
2、语句块
3、伪类边框，字体图标，显隐，overflow，阴影，二维变形
4、二叉树的三种遍历非递归实现
5、java线程：互斥锁与读写锁


长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消，“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字，当前共字 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字，当前共字

    发送中

    网络异常，请稍后重试

    微信扫一扫
    关注该公众号

    0 │ 收藏 │ 举报




    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议，举报不良信息等均可联系我们。

    TinyMind客服邮箱：support@tinymind.net.cn

    TinyMind.net.cn，专业AI技术社区