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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文链接: 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>

效果图如下查看案例

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUMAAACnCAYAAACLkT4nAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAINSURBVHhe7dRBDcAwEMCw8edYLLdAaB97dLKlUMgzAIwZAsQMAWKGADFDgJghQLZmuNaSpKs6tT1DgFuYIUDMECBmCBAzBIgZAsQMAWKGADFDgJghQMwQIGYIEDMEiBkCxAwBYoYAMUOAmCFAzBAgZggQMwSIGQLEDAFihgAxQ4CYIUDMECBmCBAzBIgZAsQMAWKGADFDgJghQMwQIGYIEDMEiBkCxAwBYoYAMUOAmCFAzBAgZggQMwSIGQLEDAFihgAxQ4CYIUDMECBmCBAzBIgZAsQMAWKGADFDgJghQMwQIGYIEDMEiBkCxAwBYoYAMUOAmCFAzBAgZggQMwSIGQLEDAFihgAxQ4CYIUDMECBmCBAzBIgZAsQMAWKGADFDgJghQMwQIGYIEDMEiBkCxAwBYoYAMUOAmCFAzBAgZggQMwSIGQLEDAFihgAxQ4CYIUDMECBmCBAzBIgZAsQMAWKGADFDgJghQMwQIGYIEDMEiBkCxAwBYoYAMUOAmCFAzBAgZggQMwSIGQLEDAFihgAxQ4CYIUDMECBmCBAzBIgZAsQMAWKGADFDgJghQMwQIGYIEDMEiBkCxAwBYoYAMUOAmCFAzBAgZggQMwSIGQLEDAFihgAxQ4CYIUDMECBmCBAzBIgZAuTTGUrSTZ3amiHA35khQMwQIGYIEDMEiBkCxAwBYoYAMUOAmXkBjIFSF73FG84AAAAASUVORK5CYII=" alt="" />

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);

效果图如下查看案例

aaarticlea/png;base64,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" alt="" />

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();

效果图如下查看案例

aaarticlea/png;base64,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" alt="" />

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>

效果图如下查看案例

aaarticlea/png;base64,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" alt="" />

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);

效果图如下查看案例

aaarticlea/png;base64,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" alt="" />

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();

效果图如下查看案例

aaarticlea/png;base64,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" alt="" />

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="data: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="data: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="data: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="data: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="data: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>

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

aaarticlea/png;base64,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0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwBg0XRMEwP0UwAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAOUgAA4CAFAAAO+ukCICIiIh35ka8FAAC4QwEAgIMUAAA4SAEAgIMUAAA4SAEAgIMUAAA4SAEAgIMUAAA4SAEAgHPe3v4CJY7aXJt16Y4AAAAASUVORK5CYII=" alt="" />;

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>

效果图如下查看案例

aaarticlea/gif;base64,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" alt="" />

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="data: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="data: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="data: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="data: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="data: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>