Ch5 绘制矩形

使用closePath()闭合图形

首先我们用上节课的方法绘制一个矩形。

  1. <!DOCTYPE html>
  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:1px solid #aaaaaa; display: block; margin: 50px auto;">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. <script>
  14. window.onload =function(){
  15. var canvas = document.getElementById("canvas");
  16. canvas.width =800;
  17. canvas.height =600;
  18. var context = canvas.getContext("2d");
  19. context.beginPath();
  20. context.moveTo(150,50);
  21. context.lineTo(650,50);
  22. context.lineTo(650,550);
  23. context.lineTo(150,550);
  24. context.lineTo(150,50);//绘制最后一笔使图像闭合
  25. context.lineWidth =5;
  26. context.strokeStyle ="black";
  27. context.stroke();
  28. }
  29. </script>
  30. </body>
  31. </html>

演示 5-1

运行结果:

绘制矩形

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

标题已经剧透了,使用closePath()闭合图形。

  1. <!DOCTYPE html>
  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:1px solid #aaaaaa; display: block; margin: 50px auto;">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. <script>
  14. window.onload =function(){
  15. var canvas = document.getElementById("canvas");
  16. canvas.width =800;
  17. canvas.height =600;
  18. var context = canvas.getContext("2d");
  19. context.beginPath();
  20. context.moveTo(150,50);
  21. context.lineTo(650,50);
  22. context.lineTo(650,550);
  23. context.lineTo(150,550);
  24. context.lineTo(150,50);//最后一笔可以不画
  25. context.closePath();//使用closePath()闭合图形
  26. context.lineWidth =5;
  27. context.strokeStyle ="black";
  28. context.stroke();
  29. }
  30. </script>
  31. </body>
  32. </html>

演示 5-2

运行结果:

使用closePath()闭合图形

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

给矩形上色

这里我们要介绍一个和stroke()同等重要的方法fill()。和当初描边一样,我们在填色之前,也要先用fillStyle属性选择要填充的颜色。

比如我们要给上面的矩形涂上黄色,可以这样写。

  1. <!DOCTYPE html>
  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:1px solid #aaaaaa; display: block; margin: 50px auto;">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. <script>
  14. window.onload =function(){
  15. var canvas = document.getElementById("canvas");
  16. canvas.width =800;
  17. canvas.height =600;
  18. var context = canvas.getContext("2d");
  19. context.beginPath();
  20. context.moveTo(150,50);
  21. context.lineTo(650,50);
  22. context.lineTo(650,550);
  23. context.lineTo(150,550);
  24. context.lineTo(150,50);//最后一笔可以不画
  25. context.closePath();//使用closePath()闭合图形
  26. context.fillStyle ="yellow";//选择油漆桶的颜色
  27. context.lineWidth =5;
  28. context.strokeStyle ="black";
  29. context.fill();//确定填充
  30. context.stroke();
  31. }
  32. </script>
  33. </body>
  34. </html>

演示 5-3

运行结果:

给矩形上色

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

封装绘制方法

大家一定发现了,绘制矩形其实都是这样的四笔,我们每次用这种笨方法画矩形都要画这四笔有多麻烦,如果我们要花10个矩形?100个?1000个?都这样写,代码会臃肿,复用性很低。这里,我们可以使用JavaScript封装这些方法。我们知道,一个矩形可以由它的左上角坐标和其长宽唯一确定。

JavaScript函数

这里我们介绍一下JavaScript函数。如果有基础的同学可以跳过这一大段,直接看后面的。

JavaScript 和 ActionScript 语言的函数声明调用一样,都是编程语言中最简单的。

函数的作用

函数的作用,可以写一次代码,然后反复地重用这个代码。如:我们要完成多组数和的功能。

  1. var sum;
  2. sum =3+2;
  3. alert(sum);
  4. sum=7+8;
  5. alert(sum);
  6. ....//不停重复两行代码

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

使用函数完成:

  1. function add2(a,b){
  2. sum = a + b;
  3. alert(sum);
  4. }// 只需写一次就可以
  5. add2(3,2);
  6. add2(7,8);
  7. ....//只需调用函数就可以

定义函数

如何定义一个函数呢?看看下面的格式:

  1. function函数名()
  2. {
  3. 函数体;
  4. }

function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。

函数调用

函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。一般有两种方式:

  • 第一种情况:在<script>标签内调用。
  1. <script>
  2. function tcon()
  3. {
  4. alert("恭喜你学会函数调用了!");
  5. }
  6. tcon();//调用函数,直接写函数名。
  7. </script>
  • 第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数。

这种情况以后用到了再说。

有参数的函数

格式如下:

  1. function函数名(参数1,参数2)
  2. {
  3. 函数代码
  4. }

注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。

按照这个格式,函数实现任意两个数的和应该写成:

  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的和。

返回值函数

  1. function add2(x,y)
  2. {
  3. sum = x + y;
  4. return sum;//返回函数值,return后面的值叫做返回值。
  5. }

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


至此,我们把JavaScript函数也顺便系统的说了一下。下面回到正题~

我们也可以封装一下我们的矩形,代码如下:

  1. <!DOCTYPE html>
  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:1px solid #aaaaaa; display: block; margin: 50px auto;">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. <script>
  14. window.onload =function(){
  15. var canvas = document.getElementById("canvas");
  16. canvas.width =800;
  17. canvas.height =600;
  18. var context = canvas.getContext("2d");
  19. drawRect(context,150,50,50,50,"red",5,"blue");
  20. drawRect(context,250,50,50,50,"green",5,"red");
  21. drawRect(context,350,50,50,50,"yellow",5,"black");
  22. }
  23. function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
  24. cxt.beginPath();
  25. cxt.moveTo(x, y);
  26. cxt.lineTo(x + width, y);
  27. cxt.lineTo(x + width, y + height);
  28. cxt.lineTo(x, y + height);
  29. cxt.lineTo(x, y);
  30. cxt.closePath();
  31. cxt.lineWidth = borderWidth;
  32. cxt.strokeStyle = borderColor;
  33. cxt.fillStyle = fillColor;
  34. cxt.fill();
  35. cxt.stroke();
  36. }
  37. </script>
  38. </body>
  39. </html>

演示 5-4

运行结果:

封装绘制矩形方法

使用rect()方法绘制矩形

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

  1. context.rect(x,y,width,height);

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

  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. cxt.lineWidth = borderWidth;
  6. cxt.strokeStyle = borderColor;
  7. cxt.fillStyle = fillColor;
  8. cxt.fill();
  9. cxt.stroke();
  10. }

调用封装方法,绘制魔性图像

还记得我们第三节开头那个魔性的图像吗? 度娘魔性图

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

  1. <!DOCTYPE html>
  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:1px solid #aaaaaa; display: block; margin: 50px auto;">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. <script>
  14. window.onload =function(){
  15. var canvas = document.getElementById("canvas");
  16. canvas.width =800;
  17. canvas.height =600;
  18. var context = canvas.getContext("2d");
  19. context.beginPath();
  20. context.rect(0,0,800,600);
  21. context.fillStyle ="#AA9033";
  22. context.fill();
  23. context.beginPath();
  24. for(var i=0; i<20; i++){
  25. drawWhiteRect(context,200+10* i,100+10* i,400-20* i,400-20* i);
  26. drawBlackRect(context,205+10* i,105+10* i,390-20* i,390-20* i);
  27. }
  28. context.beginPath();
  29. context.rect(395,295,5,5);
  30. context.fillStyle ="black";
  31. context.lineWidth =5;
  32. context.fill();
  33. context.stroke();
  34. }
  35. function drawBlackRect(cxt, x, y, width, height){
  36. cxt.beginPath();
  37. cxt.rect(x, y, width, height);
  38. cxt.lineWidth =5;
  39. cxt.strokeStyle ="black";
  40. cxt.stroke();
  41. }
  42. function drawWhiteRect(cxt, x, y, width, height){
  43. cxt.beginPath();
  44. cxt.rect(x, y, width, height);
  45. cxt.lineWidth =5;
  46. cxt.strokeStyle ="white";
  47. cxt.stroke();
  48. }
  49. </script>
  50. </body>
  51. </html>

演示 5-5

运行结果:

魔性正方形

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

好了,多花点时间消化消化。然后我们带着我们完成的艺术品,继续前进~😋