canvas从简到繁

男娘i 2023-02-23 08:41 10阅读 0赞

介绍个常用插件网站，上面有比较好的canvas栗子，还是挺棒的，可以看一下：[jQuery插件库][jQuery]

有一篇超棒的有关canvas的文章：[学习 HTML5 Canvas 这一篇文章就够了][HTML5 Canvas]

HTML5 `<canvas>` 元素用于图形的绘制，通过脚本比如js来绘制。

<canvas id="skyCanvas" width="500" height="500" style="border:1px solid #000000"></canvas>
    
    <script> var canvas=document.querySelector("#skyCanvas"); // 1、创建画笔 var brush=canvas.getContext("2d"); // 2、绘制直线 // （1）设置开始点 brush.moveTo(150,0); // （2）设置结束点 brush.lineTo(0,150); // （3）连点成线 // brush.stroke(); // 3、设置线条的粗细、颜色 // （1）更换画笔 brush.lineWidth="5"; // （2）更换颜色 brush.strokeStyle="tomato"; // （3）连点成线 brush.stroke(); </script>

![在这里插入图片描述][20200706170442102.png]

然后我们来做几个小栗子。

#### **栗子1：画一个封闭的五角星。** ####

// 4、画一个封闭五角星
        // 分析：一个起始点，4个经过点，然后回到起始点
        // 注意：如果在同一个页面上重新绘制另一个，则执行一个方法 beginPath()
        brush.beginPath();//重新开始笔触
        brush.moveTo(10,250);
        brush.lineTo(490,250);
        brush.lineTo(125,490);
        brush.lineTo(250,10);
        brush.lineTo(375,490);
        brush.lineTo(10,250);
        brush.stroke();
        // 5、填充颜色
        // （1）设置颜色
        brush.fillStyle="yellow";
        // （2）执行填充
        brush.fill();
        brush.closePath();//结束此次绘制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
绘制之前，计算好五角星的坐标。

#### **栗子2：绘制矩形。** ####

// 6、用方法直接绘制矩形，不需要自己画
        brush.beginPath();//重新开始
        brush.rect(20,20,200,100);//x，y，w，h 
        brush.strokeStyle="teal";
        brush.lineWidth="3";
        brush.fillStyle="yellowgreen";
        brush.fill();
        brush.stroke();
        brush.closePath();//结束此次绘制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

#### **栗子3：使用 “Arial” 字体在画布上绘制一个高 30px 的文字（实心&空心）。** ####

// 7、绘制文本（实心）
        brush.beginPath();//重新开始
        brush.fillStyle="#000";//更改填充颜色
        brush.lineWidth="1";
        brush.font="30px Arial";
        brush.fillText("Hello World",350,350);//fillText(text,x,y) - 在 canvas 上绘制实心的文本
        
        // 8、绘制文本（空心）
        brush.beginPath();//重新开始
        brush.strokeStyle="#000";//更改线条颜色
        brush.font="30px Arial";
        brush.strokeText("My Friend",350,450);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

#### **栗子4：绘制圆形。** ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]  
这里的需要注意一个问题，不管是顺时针还是逆时针，所转的角度比如说90°，逆时针和顺时针都会转到90°的位置，只不过是路径不同。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]  
先绘制圆形表盘，完成后绘制其他内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]  
对Canvas中特定元素的旋转、平移等操作实际上是对**整个画布**进行了操作，所以如果不对Canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位（会对Canvas的坐标产生一些影响，如改变坐标的原点，X坐标轴和Y坐标轴的方向）。

save()：用来保存Canvas的状态。save()之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。  
restore()：用来恢复Canvas之前保存的状态。防止save()后对Canvas执行的操作对后续的绘制有影响。  
save是入栈，restore是出栈。

不说那些官方的话，Canvas的save有点像复制了一个canvas画布，Canvas的restore有点像销毁刚刚复制的画布，然后把绘制的内容与原画布融合。

#### **栗子5：绘制圆形钟表。** ####

站内文章：[canvas 绘制转动的钟表][canvas]

其中需要注意的是，为了消除拖影，在每一次画之前先清空画布。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]

#### **栗子6：给绘制的图形填充背景颜色。** ####

用到的一个方法是 createPattern() ， 连接文章：[createPattern() 自定义宽高][createPattern_]

<canvas id="skyCanvas" width="600" height="600"></canvas>
    <script> var canvas=document.querySelector("#skyCanvas"); var brush=canvas.getContext("2d"); brush.beginPath(); brush.arc(300, 300, 250, 0, Math.PI * 2, false);//false是顺时针，true是逆时针，但对于圆来讲，顺时针或逆时针来绘制都OK brush.strokeStyle = "skyblue"; brush.lineWidth = "5"; brush.stroke(); var img = new Image(); img.src = './bg.jpg'; img.onload = function () { var ptn = brush.createPattern(img, 'no-repeat') brush.fillStyle = ptn; brush.fill(); } brush.closePath(); </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]

#### **总结：** ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]  
ctx.beginPath(); 与 ctx.closePath();可以形成一个独立绘制区域。与同一画布上的其他绘制互不影响。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 11]

[jQuery]: http://www.jq22.com/
[HTML5 Canvas]: https://www.runoob.com/w3cnote/html5-canvas-intro.html
[20200706170442102.png]: https://img-blog.csdnimg.cn/20200706170442102.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200706170822551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200706171040785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200706172401149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200707093057701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200707094037446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200707100319357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200707100814701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[canvas]: https://blog.csdn.net/weixin_43297321/article/details/107242863
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200707112919947.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[createPattern_]: https://blog.csdn.net/lonecry/article/details/80947604
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200711094926436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200707093333526.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200707113700519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200707114212495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70