圆月山庄资源网

利用HTML5 Canvas API绘制矩形的超级攻略
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

使用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,矩形
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接