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

网络
雾，没有山河那么壮观，没有雨那么缠绵。它总是那么轻盈，那么淡雅，给人一种美的享受。陽光被层层叠叠的树叶过滤，漏到他身上变成了淡淡的圆圆的轻轻摇曳的光晕。

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <!DOCTYPEhtml>
  9. <htmllang="zh">
  10. <head>
  11. <metacharset="UTF-8">
  12. <title>绘制矩形</title>
  13. </head>
  14. <body>
  15. <divid="canvas-warp">
  16. <canvasid="canvas"style="border:1pxsolid#aaaaaa;display:block;margin:50pxauto;">
  17. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  18. </canvas>
  19. </div>
  21. <script>
  22. window.onload=function(){
  23. varcanvas=document.getElementById("canvas");
  24. canvas.width=800;
  25. canvas.height=600;
  26. varcontext=canvas.getContext("2d");
  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();
  38. }
  39. </script>
  40. </body>
  41. </html>
  42. </body>
  43. </html>

运行结果：

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="zh">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>绘制矩形</title>
  6. </head>
  7. <body>
  8. <divid="canvas-warp">
  9. <canvasid="canvas"style="border:1pxsolid#aaaaaa;display:block;margin:50pxauto;">
  10. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  11. </canvas>
  12. </div>
  14. <script>
  15. window.onload=function(){
  16. varcanvas=document.getElementById("canvas");
  17. canvas.width=800;
  18. canvas.height=600;
  19. varcontext=canvas.getContext("2d");
  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()闭合图形
  29. context.lineWidth=5;
  30. context.strokeStyle="black";
  31. context.stroke();
  33. }
  34. </script>
  35. </body>
  36. </html>
  37. </body>
  38. </html>

运行结果：

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="zh">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>绘制矩形</title>
  6. </head>
  7. <body>
  8. <divid="canvas-warp">
  9. <canvasid="canvas"style="border:1pxsolid#aaaaaa;display:block;margin:50pxauto;">
  10. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  11. </canvas>
  12. </div>
  14. <script>
  15. window.onload=function(){
  16. varcanvas=document.getElementById("canvas");
  17. canvas.width=800;
  18. canvas.height=600;
  19. varcontext=canvas.getContext("2d");
  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()闭合图形
  29. context.fillStyle="yellow";//选择油漆桶的颜色
  30. context.lineWidth=5;
  31. context.strokeStyle="black";
  33. context.fill();//确定填充
  34. context.stroke();
  36. }
  37. </script>
  38. </body>
  39. </html>
  40. </body>
  41. </html>

运行结果：

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


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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript Code复制内容到剪贴板
  1. functionadd2(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. functionadd2(x,y)
  2. {
  3. sum=x+y;
  4. returnsum;//返回函数值,return后面的值叫做返回值。
  5. }

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="zh">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>封装绘制矩形方法</title>
  6. </head>
  7. <body>
  8. <divid="canvas-warp">
  9. <canvasid="canvas"style="border:1pxsolid#aaaaaa;display:block;margin:50pxauto;">
  10. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  11. </canvas>
  12. </div>
  14. <script>
  15. window.onload=function(){
  16. varcanvas=document.getElementById("canvas");
  17. canvas.width=800;
  18. canvas.height=600;
  19. varcontext=canvas.getContext("2d");
  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. }
  26. functiondrawRect(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();
  35. cxt.lineWidth=borderWidth;
  36. cxt.strokeStyle=borderColor;
  37. cxt.fillStyle=fillColor;
  39. cxt.fill();
  40. cxt.stroke();
  41. }
  42. </script>
  43. </body>
  44. </html>
  45. </body>
  46. </html>

运行结果：

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

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

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

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

调用封装方法，绘制魔性图像
来个有魔性的图像~

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="zh">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>绘制魔性图形</title>
  6. </head>
  7. <body>
  8. <divid="canvas-warp">
  9. <canvasid="canvas"style="border:1pxsolid#aaaaaa;display:block;margin:50pxauto;">
  10. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  11. </canvas>
  12. </div>
  14. <script>
  15. window.onload=function(){
  16. varcanvas=document.getElementById("canvas");
  17. canvas.width=800;
  18. canvas.height=600;
  19. varcontext=canvas.getContext("2d");
  21. context.beginPath();
  22. context.rect(0,0,800,600);
  23. context.fillStyle="#AA9033";
  25. context.fill();
  27. context.beginPath();
  28. for(vari=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. }
  33. context.beginPath();
  34. context.rect(395,295,5,5);
  35. context.fillStyle="black";
  36. context.lineWidth=5;
  38. context.fill();
  39. context.stroke();
  40. }
  42. functiondrawBlackRect(cxt,x,y,width,height){
  43. cxt.beginPath();
  44. cxt.rect(x,y,width,height);
  46. cxt.lineWidth=5;
  47. cxt.strokeStyle="black";
  49. cxt.stroke();
  50. }
  52. functiondrawWhiteRect(cxt,x,y,width,height){
  53. cxt.beginPath();
  54. cxt.rect(x,y,width,height);
  56. cxt.lineWidth=5;
  57. cxt.strokeStyle="white";
  59. cxt.stroke();
  60. }
  61. </script>
  62. </body>
  63. </html>
  64. </body>
  65. </html>

运行结果：

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

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

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

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

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

JavaScript Code复制内容到剪贴板
  1. //canvas元素,图片元素
  2. varcanvas=document.querySelector("#canvas"),image=newImage();
  3. varcontext=canvas.getContext("2d");
  5. image.onload=function(){
  6. //创建图片纹理
  7. varpattern=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绘制矩形的超级攻略内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
如何使用canvas对video视频某一刻截图功能
Canvas绘制像素风图片的示例代码
canvas画图被放大且模糊的如何解决方法
Canvas获取视频第一帧缩略图的如何实现
详解如何在Canvas中添加事件的方法