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

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

最后编辑于：2019.05.05 20:03:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,117评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,963评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 107,897评论 0赞 240
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,805评论 0赞 203
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,208评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,535评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,797评论 2赞 311
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,493评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,215评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,477评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,988评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,325评论 2赞 252
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,971评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,055评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,807评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,544评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,455评论 2赞 266

canvas基础API

推荐阅读更多精彩内容