首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

利用HTML5 Canvas API绘制矩形的超级攻略

Posted in HTML / CSS onMarch 21, 2016

使用closePath()闭合图形
首先我们用最普通的方法绘制一个矩形。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title></title>   
  6. </head>   
  7. <body>   
  8. <!DOCTYPE html>   
  9. <html lang="zh">   
  10. <head>   
  11.     <meta charset="UTF-8">   
  12.     <title>绘制矩形</title>   
  13. </head>   
  14. <body>   
  15. <div id="canvas-warp">   
  16.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  17.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  18.     </canvas>   
  19. </div>   
  20.   
  21. <script>   
  22.     window.onload = function(){   
  23.         var canvas = document.getElementById("canvas");   
  24.         canvas.width = 800;   
  25.         canvas.height = 600;   
  26.         var context = canvas.getContext("2d");   
  27.   
  28.         context.beginPath();   
  29.         context.moveTo(150,50);   
  30.         context.lineTo(650,50);   
  31.         context.lineTo(650,550);   
  32.         context.lineTo(150,550);   
  33.         context.lineTo(150,50);     //绘制最后一笔使图像闭合   
  34.         context.lineWidth = 5;   
  35.         context.strokeStyle = "black";   
  36.         context.stroke();   
  37.   
  38.     }   
  39. </script>   
  40. </body>   
  41. </html>   
  42. </body>   
  43. </html>  

运行结果：
利用HTML5 Canvas API绘制矩形的超级攻略

乍一看没啥问题，但是视力好的童鞋已经发现了，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了lineWidth导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽，这种缺口就越明显。那么这种情况该怎么避免呢？
标题已经剧透了，使用clothPath()闭合图形。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制矩形</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.beginPath();   
  22.         context.moveTo(150,50);   
  23.         context.lineTo(650,50);   
  24.         context.lineTo(650,550);   
  25.         context.lineTo(150,550);   
  26.         context.lineTo(150,50);     //最后一笔可以不画   
  27.         context.closePath();        //使用closePath()闭合图形   
  28.   
  29.         context.lineWidth = 5;   
  30.         context.strokeStyle = "black";   
  31.         context.stroke();   
  32.   
  33.     }   
  34. </script>   
  35. </body>   
  36. </html>   
  37. </body>   
  38. </html>  

运行结果：
利用HTML5 Canvas API绘制矩形的超级攻略

这个例子结合上节课的讲解，我们知道了绘制路径的时候需要将规划的路径使用beginPath()与closePath()包裹起来。当然，最后一笔可以不画出来，直接使用closePath()，它会自动帮你闭合的。(所以如果你不想绘制闭合图形就不可以使用closePath())

给矩形上色
这里我们要介绍一个和stroke()同等重要的方法fill()。和当初描边一样，我们在填色之前，也要先用fillStyle属性选择要填充的颜色。
比如我们要给上面的矩形涂上黄色，可以这样写。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制矩形</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.beginPath();   
  22.         context.moveTo(150,50);   
  23.         context.lineTo(650,50);   
  24.         context.lineTo(650,550);   
  25.         context.lineTo(150,550);   
  26.         context.lineTo(150,50);     //最后一笔可以不画   
  27.         context.closePath();        //使用closePath()闭合图形   
  28.   
  29.         context.fillStyle = "yellow";   //选择油漆桶的颜色   
  30.         context.lineWidth = 5;   
  31.         context.strokeStyle = "black";   
  32.   
  33.         context.fill();                 //确定填充   
  34.         context.stroke();   
  35.   
  36.     }   
  37. </script>   
  38. </body>   
  39. </html>   
  40. </body>   
  41. </html>   
  42.   

运行结果：
利用HTML5 Canvas API绘制矩形的超级攻略

这里需要注意的是一个良好的编码规范。因为之前说过了Canvas是基于状态的绘制，只有调用了stroke()和fill()才确定绘制。所以我们要把这两行代码放在最后，其余的状态设置的代码放在它们之前，将状态设置与确定绘制的代码分隔开。增强代码的可读性。

封装绘制方法
大家一定发现了，绘制矩形其实都是这样的四笔，我们每次用这种笨方法画矩形都要画这四笔有多麻烦，如果我们要花10个矩形？100个？1000个？都这样写，代码会臃肿，复用性很低。这里，我们可以使用JavaScript封装这些方法。我们知道，一个矩形可以由它的左上角坐标和其长宽唯一确定。
JavaScript函数
这里我们介绍一下JavaScript函数。如果有基础的同学可以跳过这一大段，直接看后面的。
JavaScript 和 ActionScript 语言的函数声明调用一样，都是编程语言中最简单的。
函数的作用
函数的作用，可以写一次代码，然后反复地重用这个代码。如:我们要完成多组数和的功能。

JavaScript Code复制内容到剪贴板
  1. var sum;      
  2. sum = 3+2;   
  3. alert(sum);   
  4.   
  5. sum=7+8 ;   
  6. alert(sum);    
  7.   
  8. ....  //不停重复两行代码   
  9.   

如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。
使用函数完成:

JavaScript Code复制内容到剪贴板
  1. function add2(a,b){   
  2.     sum = a + b;   
  3.      alert(sum);   
  4. } //  只需写一次就可以   
  5.   
  6. add2(3,2);   
  7. add2(7,8);   
  8. ....  //只需调用函数就可以   
  9.   

定义函数
如何定义一个函数呢？看看下面的格式：

JavaScript Code复制内容到剪贴板
  1. function  函数名( )   
  2. {   
  3.      函数体;   
  4. }   

function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
函数调用
函数定义好后，是不能自动执行的，需要调用它，直接在需要的位置写函数名。一般有两种方式：

第一种情况：在<script>标签内调用。

JavaScript Code复制内容到剪贴板
  1. <script>   
  2. function tcon()   
  3. {   
  4.     alert("恭喜你学会函数调用了!");   
  5. }   
  6. tcon();    //调用函数，直接写函数名。   
  7. </script>  

第二种情况：在HTML文件中调用，如通过点击按钮后调用定义好的函数。

这种情况以后用到了再说。
有参数的函数
格式如下：

JavaScript Code复制内容到剪贴板
  1. function 函数名(参数1,参数2)   
  2. {   
  3.      函数代码   
  4. }  

注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。
按照这个格式，函数实现任意两个数的和应该写成：

JavaScript Code复制内容到剪贴板
  1. function add2(x,y)   
  2. {   
  3.    sum = x + y;   
  4.    document.write(sum);   
  5. }  

x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
例如，add2(3，4)会求3+4的和，add2(60,20)则会求出60和20的和。
返回值函数

JavaScript Code复制内容到剪贴板
  1. function add2(x,y)   
  2. {   
  3.    sum = x + y;   
  4.    return sum; //返回函数值,return后面的值叫做返回值。   
  5. }  

这里的return和其他语言中的一样，但是在JS或者AS等弱类型语言中，返回值类型是不需要写到函数声明里的。

至此，我们把JavaScript函数也顺便系统的说了一下。下面回到正题~
我们也可以封装一下我们的矩形，代码如下：

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>封装绘制矩形方法</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         drawRect(context, 150, 50, 50, 50, "red", 5, "blue");   
  22.         drawRect(context, 250, 50, 50, 50, "green", 5, "red");   
  23.         drawRect(context, 350, 50, 50, 50, "yellow", 5, "black");   
  24.     }   
  25.   
  26.     function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){   
  27.         cxt.beginPath();   
  28.         cxt.moveTo(x, y);   
  29.         cxt.lineTo(x + width, y);   
  30.         cxt.lineTo(x + width, y + height);   
  31.         cxt.lineTo(x, y + height);   
  32.         cxt.lineTo(x, y);   
  33.         cxt.closePath();   
  34.   
  35.         cxt.lineWidth = borderWidth;   
  36.         cxt.strokeStyle = borderColor;   
  37.         cxt.fillStyle = fillColor;   
  38.   
  39.         cxt.fill();   
  40.         cxt.stroke();   
  41.     }   
  42. </script>   
  43. </body>   
  44. </html>   
  45. </body>   
  46. </html>  

运行结果：
利用HTML5 Canvas API绘制矩形的超级攻略

使用rect()方法绘制矩形
犹豫绘制矩形是常用的方法，所以在Canvas API中已经帮我们封装好了一个绘制矩形的方法——rect()。这个方法接收4个参数x, y, width, height，实际调用时也就是

JavaScript Code复制内容到剪贴板
  1. context.rect(x,y,width,height);  

基于此，我们帮刚才封装的方法优化一下。

JavaScript Code复制内容到剪贴板
  1. function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){   
  2.         cxt.beginPath();   
  3.         cxt.rect(x, y, width, height);   
  4.         //cxt.closePath();    可以不用closePath()   
  5.   
  6.         cxt.lineWidth = borderWidth;   
  7.         cxt.strokeStyle = borderColor;   
  8.         cxt.fillStyle = fillColor;   
  9.   
  10.         cxt.fill();   
  11.         cxt.stroke();   
  12. }  

调用封装方法，绘制魔性图像
来个有魔性的图像~
利用HTML5 Canvas API绘制矩形的超级攻略

好，我们就拿它开刀，练练手，给咱刚封装好的方法活动活动筋骨。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制魔性图形</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.beginPath();   
  22.         context.rect(0, 0, 800, 600);   
  23.         context.fillStyle = "#AA9033";   
  24.   
  25.         context.fill();   
  26.   
  27.         context.beginPath();   
  28.         for(var i=0; i<=20; i++){   
  29.             drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 20 * i);   
  30.             drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 - 20 * i, 390 - 20 * i);   
  31.         }   
  32.   
  33.         context.beginPath();   
  34.         context.rect(395, 295, 5, 5);   
  35.         context.fillStyle = "black";   
  36.         context.lineWidth = 5;   
  37.   
  38.         context.fill();   
  39.         context.stroke();   
  40.     }   
  41.   
  42.     function drawBlackRect(cxt, x, y, width, height){   
  43.         cxt.beginPath();   
  44.         cxt.rect(x, y, width, height);   
  45.   
  46.         cxt.lineWidth = 5;   
  47.         cxt.strokeStyle = "black";   
  48.   
  49.         cxt.stroke();   
  50.     }   
  51.   
  52.     function drawWhiteRect(cxt, x, y, width, height){   
  53.         cxt.beginPath();   
  54.         cxt.rect(x, y, width, height);   
  55.   
  56.         cxt.lineWidth = 5;   
  57.         cxt.strokeStyle = "white";   
  58.   
  59.         cxt.stroke();   
  60.     }   
  61. </script>   
  62. </body>   
  63. </html>   
  64. </body>   
  65. </html>  

运行结果：
利用HTML5 Canvas API绘制矩形的超级攻略

是不是很有魔性？是不是非常的酷？这段代码就不花篇幅解释了，大家自己课下琢磨琢磨，也可以尝试着用已经学过的知识去绘制一个酷酷的图像。这节课内容有点多，其实也只是介绍了四个属性和方法——closePath()、fillStyle、fill()、rect()，还有一个扩展的JavaScript函数讲解。

Canvas实现图片圆角效果
本规则适用于各种Canvas绘制的规则或不规则图形。

Canvas实现图片圆角的关键是使用“纹理填充”。

Canvas中有个名为createPattern的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。

举个板栗，如果实现名为test.jpg的图片圆形效果，大小100px * 100px, 则主要JS代码如下：

JavaScript Code复制内容到剪贴板
  1. // canvas元素, 图片元素   
  2. var canvas = document.querySelector("#canvas"), image = new Image();   
  3. var context = canvas.getContext("2d");   
  4.   
  5. image.onload = function() {   
  6.     // 创建图片纹理   
  7.     var pattern = context.createPattern(image, "no-repeat");   
  8.     // 绘制一个圆   
  9.     context.arc(50, 50, 50, 0, 2 * Math.PI);   
  10.     // 填充绘制的圆   
  11.     context.fillStyle = pattern;   
  12.     context.fill();       
  13. };   
  14. image.src = "test.jpg";  

让Canvas上下文的fillStyle属性值等于这个纹理对象就可以了。

Canvas自带的矩形绘制API是不带圆角属性的，因此，demo中的圆角矩形使用了自定义方法。我简单瞅了瞅，要实现垂直、水平方向不同圆角大小略折腾，本着示意的目的，就没大动干戈，所以demo的圆角是对称的。
利用HTML5 Canvas API绘制矩形的超级攻略

利用HTML5 Canvas API绘制矩形的超级攻略

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
Mar 31 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 #HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 #HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 #HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 #HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 #HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 #HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 #HTML / CSS
放大器(1) VOLVO(1) S900(1) DSP(2) 接收机(2) ETON(1) E1-XM(1) 沃尔沃(1) 矿石收音机(1) R601SW(1)
You might like
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python多进程原理与用法分析
2018/08/21 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
python实现车牌识别的示例代码
2019/08/05 Python
django框架两个使用模板实例
2019/12/11 Python
Python模块的定义，模块的导入，__name__用法实例分析
2020/01/07 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
高一英语教学反思
2014/01/22 职场文书
师德学习感言
2014/01/31 职场文书
洗发水广告词
2014/03/13 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
综合办公室岗位职责
2015/04/11 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
学生早退检讨书（范文）
2019/08/19 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
Django cookie和session的应用场景及如何使用
2021/04/29 Python
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
sql server 累计求和实现代码
2022/02/28 SQL Server
redis 解决库存并发问题实现数量控制
2022/04/08 Redis