canvas基础API

1、标签：<canvas></canvas>(未标明宽高时，默认为宽300px，高150px)

2、渲染上下文getContext();可利用这个检查浏览器支持性

var canvas=document.getElementById("canvas");
if(canvas.getContext){
    var ctx=canvas.getContext("2d");
}

3、绘制矩形：

填充矩形：fillRect(x,y,width,height)

矩形边框：strokeRect(x,y,width,height)

清除指定矩形区域，使清除部分完全透明：clearRect(x,y,width,height)

<canvas id="canvas" width="150px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            ctx.fillStyle="rgb(200,0,0)";
            ctx.fillRect(10,10,55,50);

            ctx.fillStyle="rgba(0,0,200,0.5)";
            ctx.fillRect(30,30,55,50);
        }
    </script>

4、绘制路径

新建路径：beginPath()

闭合路径：closePath()

绘制图形轮廓：stroke()

绘制填充图形：fill()

移动笔触：moveTo(x,y)

绘制直线：lineTo(x,y)

<canvas id="canvas" width="150px" height="150px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(75, 50);
            ctx.lineTo(100,75);
            ctx.lineTo(100,25);
            ctx.fill();
        }
    </script>

绘制圆弧：arc(x,y,radius,startAngle,endAngle,anticlokwise)

这个方法画一个以(x,y)为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成，anticlokwise为一个布尔值，true为逆时针，false为顺时针

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");

            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true);
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false);
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true);
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,true);
            ctx.stroke();
        }
    </script>

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            for(var i=0;i<4;i++){
                for(var j=0;j<3;j++){
                    ctx.beginPath();
                    var x=25+j*50;
                    var y=25+i*50;
                    var radius=20;
                    var startAngle=0;
                    var endAngle=Math.PI+(Math.PI*j)/2;
                    var anticlockwise=i%2==0?false:true;

                    ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);
                    if(i>1){
                        ctx.fill();
                    }else{
                        ctx.stroke();
                    }
                }
            }
        }
    </script>

绘制二次贝塞尔曲线：quadraticCurveTo(cp1x,cp1y,x,y)

x,y为结束点，cp1x，cp1y为控制点

绘制三次贝塞尔曲线：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

x,y为结束点，cp1x，cp1y为控制点一，cp2x，cp2y为控制点二

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            ctx.beginPath();
            ctx.fillStyle="red"
            ctx.moveTo(75,40);
            ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
        }
    </script>

5、色彩

填充颜色：fillStyle=color;

轮廓颜色：strokeStyle=color;

<canvas id="canvas" width="2000px" height="2000px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            for(var i=0;i<=25;i++){
                for(var j=0;j<=25;j++){
                    ctx.fillStyle="rgb("+10*i+","+10*j+",0)";
                    ctx.fillRect(i*25,j*25,25,25);
                }
            }
        }
    </script>

这个调色板有木有让你有密集恐惧症，有的话赶紧切换到其他网页┑(￣Д ￣)┍

控制透明度：globalAlpha=transparencyValue;

这个属性影响到canvas里所有的图形的透明度，有效的值的范围是0.0-1.0，默认值是1.0，这个属性在需要绘制大量拥有相同透明度的图形的时候相当高效，但是rgba的操作性更强。

<canvas id="canvas" width="300px" height="300px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            ctx.fillStyle="#FFDD00";
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle="#66CC00";
            ctx.fillRect(150,0,150,150);
            ctx.fillStyle="#0099FF";
            ctx.fillRect(0,150,150,150);
            ctx.fillStyle="#FF3300";
            ctx.fillRect(150,150,150,150);
            ctx.fillStyle="#fff";
            ctx.globalAlpha=0.2;

            for(var i=1;i<8;i++){
                ctx.beginPath();
                ctx.arc(150,150,i*20,0,Math.PI*2,true);
                ctx.fill();
            }
        }
    </script>

<canvas id="canvas" width="160px" height="200px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            ctx.fillStyle="#FFDD00";
            ctx.fillRect(0,0,160,50);
            ctx.fillStyle="#66CC00";
            ctx.fillRect(0,50,160,50);
            ctx.fillStyle="#0099FF";
            ctx.fillRect(0,100,160,50);
            ctx.fillStyle="#FF3300";
            ctx.fillRect(0,150,160,50);
            for(var i=0;i<4;i++){
                for(var j=0;j<10;j++){
                    ctx.fillStyle="rgba(255,255,255,"+(j+1)/10+")";
                    ctx.fillRect(5+15*j,10+50*i,10,30)
                }
            }
        }
    </script>

6、线型

设置线条宽度：lineWidth=value（value是描述线段宽度的数字，0、负数、infinity和NaN会被忽略）

设置线条末端样式：lineCap=type（type有3个可能的值，butt：线段末端以方形结束，round：线段末端以圆形结
束，square：线段末端以方形结束，但是增驾一个宽度和线段相同，高度是线段厚度一半的矩形区域，默认值是butt）

设定线条与线条间接合处的样式：lineJoin=type（type有3个可能的值，round：连接处为扇形，bevel：三角形，miter：菱形，默认值为miter）

限制两条线相交时交接处的最大长度：miterLimit=value（所谓交接处长度即斜接长度是指线条交接处内角顶点到外角顶点的长度）

返回一个包含当前虚线样式，长度为非负偶数的数组：getLineDash()

设置当前虚线样式：setLineDash()

设置虚线样式的起始偏移量：lineDashOffset=value

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            var offset=0;
            function draw(){
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.setLineDash([4,2]);
                ctx.lineDashOffset=-offset;
                ctx.strokeRect(10,10,100,100);
            }

            function march(){
                offset++;
                if(offset>16){
                    offset=0;
                }
                draw();
                setTimeout(march,20);
            }
            march();
        }
    </script>

<canvas id="canvas" width="1000px" height="600px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            ctx.setLineDash([5,40]);
            console.log(ctx.getLineDash());
            ctx.beginPath();
            ctx.moveTo(0,100);
            ctx.lineTo(400,100);
            ctx.stroke();
        }
    </script>

7、渐变

线性渐变：createLinearGradient(x1,y1,x2,y2)

径向渐变：createRadialGradient(x1,y1,r1,x2,y2,r2)

上色：gradient.addColorStop(position,color)（position是0.0到1.0之间的数值）

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            var gradient=ctx.createLinearGradient(0,0,200,0);
            gradient.addColorStop(0,"green");
            gradient.addColorStop(1,"red");
            ctx.fillStyle=gradient;
            ctx.fillRect(10,10,200,100);
            
        }
    </script>

<canvas id="canvas" width="200px" height="200px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            var gradient=ctx.createRadialGradient(100,100,100,100,100,50);
            gradient.addColorStop(0,"white");
            gradient.addColorStop(1,"green");
            ctx.fillStyle=gradient;
            ctx.fillRect(0,0,200,200)
        }
    </script>

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            var radgrad=ctx.createRadialGradient(45,45,10,52,50,30);
            radgrad.addColorStop(0,"#A7D30C");
            radgrad.addColorStop(0.9,"#019F62");
            radgrad.addColorStop(1,"rgba(1,159,98,0)");

            var radgrad2=ctx.createRadialGradient(105,105,20,112,120,50);
            radgrad2.addColorStop(0,"#FF5F98");
            radgrad2.addColorStop(0.75,"#FF0188");
            radgrad2.addColorStop(1,"rgba(255,1,136,0)");

            var radgrad3=ctx.createRadialGradient(95,15,15,102,20,40);
            radgrad3.addColorStop(0,"#00C9FF");
            radgrad3.addColorStop(0.8,"#00B5E2");
            radgrad3.addColorStop(1,"rgba(228,199,0,0)");

            var radgrad4=ctx.createRadialGradient(0,150,50,0,140,90);
            radgrad4.addColorStop(0,"#F4F201");
            radgrad4.addColorStop(0.8,"#E4C700");
            radgrad4.addColorStop(1,"rgba(228,199,0,0)");

            ctx.fillStyle=radgrad4;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle=radgrad3;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle=radgrad2;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle=radgrad;
            ctx.fillRect(0,0,150,150);


        }
    </script>

8、状态

保存状态：save();通过将当前状态放入栈中，保存canvas全部状态的方法

恢复状态：restore();通过在绘图状态栈中弹出顶端的状态，将canvas恢复到最近的保存状态

<canvas id="canvas" width="300px" height="300px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.save();
        ctx.fillStyle="green";
        ctx.fillRect(10,10,100,100);
        ctx.restore();
        ctx.fillRect(150,75,100,100);
    </script>

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        if(canvas.getContext){
            var ctx=canvas.getContext("2d");
            ctx.fillRect(0,0,150,150);
            ctx.save();

            ctx.fillStyle="#09F";
            ctx.fillRect(15,15,120,120);
            ctx.save();
            ctx.fillStyle="#fff";
            ctx.grobalAlpha=0.5;
            ctx.fillRect(30,30,90,90);
            ctx.restore();
            ctx.fillRect(45,45,60,60);
            ctx.restore();
            ctx.fillRect(60,60,30,30);
        }
    </script>

9、变形

移动原点：translate(x,y)

旋转：rotate(angle)

缩放：scale(x,y)（比1大表示放大，比1小表示缩小）

矩阵修改：transform(m11,m12,m21,m22,dx,dy)

<canvas id="canvas" width="300px" height="300px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.fillRect(0,0,300,300);
        for(var i=0;i<3;i++){
            for(var j=0;j<3;j++){
                ctx.save();
                ctx.strokeStyle="#9CFF00";
                ctx.translate(50+j*100,50+i*100);
                draw(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
                ctx.restore();
            }
        }
        function draw(ctx,R,r,O){
            var x1=R-O;
            var y1=0;
            var i=1;
            ctx.beginPath();
            ctx.moveTo(x1,y1);
            do{
                if(i>20000){
                    break;
                }
                var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72));
                var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72));
                ctx.lineTo(x2,y2);
                x1=x2;
                y1=y2;
                i++;
            }while(x2!=R-O&&y2!=0);
            ctx.stroke();
        }
    </script>

 <canvas id="canvas" width="1000px" height="600px"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.fillStyle="red";
        ctx.translate(75,75);
        for(var i=0;i<6;i++){
            ctx.rotate(Math.PI*2/6);
            ctx.beginPath();
            ctx.arc(0,70,5,0,Math.PI*2,true);
            ctx.fill();
        }
    </script>

<canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        ctx.translate(75,75);
        for(var i=1;i<6;i++){
            ctx.save();
            ctx.fillStyle="rgb("+51*i+","+(255-51*i)+",255)";
            for(var j=0;j<i*6;j++){
                ctx.rotate(Math.PI*2/(i*6));
                ctx.beginPath();
                ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
                ctx.fill();
            }
            ctx.restore();
        }
    </script>

10、组合

1、globalCompositeOperation=type

最后是一个广告贴，最近新开了一个分享技术的公众号，欢迎大家关注👇