思洋互动网站建设学前班

绘制形状和颜色

首先，学习下如何画矩形，下面是相关的方法：

1) fillRect(x, y, w, h)，使用当前样式去绘制一个矩形并对其进行填充，其中x,y,w,h分别是X，Y坐标和宽度高度坐标。

2)strokeRect(x, y, w, h)，使用当前的轮廓样式去勾画一个矩形，注意这里是用线条去勾画，而不是去填充一个矩形。

3)clearRect(x, y, w, h)，在当前的画布中清除矩形的内容。

画矩形最简单的方法是用fillRect方法了，如下代码：

1. var canvas = document.getElementById(“myCanvas”);  
2. var context = canvas.getContext(“2d”);  
3. 　context.fillRect(5, 5, 145, 145);  

则在X=5，Y=5的坐标系中画出一个145*145的矩形，如下图：

广州网站建设,网站建设,广州网页设计,广州网站设计

 

如果不指定颜色，默认的是使用黑色去填充整个矩形。可以使用fillStyle方法为矩形指定颜色或其他样式，比如可以充分利用CSS 3中的opacity透明度属性，比如如下的代码，分别画了三个矩形，每个矩形的下半部分都使用了样式形成了半透明效果：

1. context.fillRect(5, 5, 145, 145);  
2. context.fillStyle = “rgb(0, 162, 232)”;  
3. context.fillRect(40, 55, 145, 145);  
4. context.fillStyle = “rgba(255, 0, 0, 0.2)”;  
5. context.fillRect(75, 105, 145, 145); 

其中rgba中比传统的rgb多了a，即透明度的含义，a的值也是0到1之间的数字，0表示完全透明，1则是完全不透明。运行结果如下图：

 

广州网站建设,网站建设,广州网页设计,广州网站设计

接下来学习如何绘制圆(弧)，绘制用到的方法如下：

1. arc(x, y, radius, startAngle, endAngle, anticlockwise) 

画圆或者圆弧。x,y为圆心坐标，radius为半径，startAngle,endAngle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆(True为逆时针，False为顺时针)。

注意这里的角度为弧度制，所以如果画一个正圆的话，是Math.PI * 2，而画60°的话，就是60 * Math.PI / 180，比如下面的代码，用fill样式填充了一个黑色的正圆：

1. context.beginPath();  
2. context.fillStyle = “rgb(0, 0, 0)”;  
3. context.arc(123, 93, 70, 0, 2 * Math.PI, true);  
4. context.fill(); 

如果要用stroke笔来勾画圆形的话，只需要指定勾画的样式strokeStyle即可，如下代码：

1. context.beginPath();  
2. context.strokeStyle = “rgb(0, 0, 0)”;  
3. context.arc(123, 93, 70, 0, 2 * Math.PI, true);  
4. context.stroke();  

下面是一个画弧度的代码例子：

1. context.beginPath();  
2. context.strokeStyle = “rgb(0, 0, 0)”;  
3. context.arc(123, 93, 70, 0, 0.5 * Math.PI, true);  
4. context.stroke(); 

结果如下图：

 

 

接下来，我们学习如何画贝塞尔曲线。HTML 5的API中，有一个画这个曲线的很容易的方法bezierCurveTo，相关参数介绍如下：

bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)：为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点，而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候，当前的位置为 (x, y)。下面是相关代码：

1. context.lineWidth = 20;  
2. context.beginPath();  
3. context.moveTo(5, 50);  
4. context.bezierCurveTo(30, 30, 130, 530, 200, 100);  
5. context.stroke(); 

绘画的图形如下图：

 

 

由于有了贝塞尔曲线功能的，因此可以绘制很多不同的图形了，比如下面的代码绘制出一个简单的笑脸图。

1. // 绘画脸部轮廓  
2. context.beginPath();  
3. context.lineWidth = 10;  
4. context.strokeStyle = “rgb(0, 0, 0)”;  
5. context.arc(200, 233, 150, 0, 2 * Math.PI, true);  
6. context.stroke();  
7. // 填充面部颜色  
8. context.beginPath();  
9. context.fillStyle = “rgba(80, 100, 80, 0.4)”;  
10. context.arc(200, 233, 150, 0, 2 * Math.PI, true);  
11. context.fill();  
12. // 绘制右眼  
13. context.lineWidth = 20;  
14. context.beginPath();  
15. context.moveTo(230, 130);  
16. context.bezierCurveTo(230, 130, 230, 130, 240, 200);  
17. context.stroke();  
18. // 绘制左眼  
19. context.beginPath();  
20. context.moveTo(170, 130);  
21. context.bezierCurveTo(170, 130, 170, 130, 160, 200);  
22. context.stroke();  
23. // 绘制上唇  
24. context.beginPath();  
25. context.moveTo(100, 230);  
26. 　context.bezierCurveTo(100, 230, 200, 380, 300, 230);  
27. 　context.stroke();  
28. 　// 绘制下唇  
29. 　context.beginPath();  
30. 　context.moveTo(100, 235);  
31. 　context.bezierCurveTo(105, 270, 200, 480, 300, 232);  
32. 　context.stroke(); 

显示结果如下图：

 

 

目前为止，我们使用的fillStyle都是使用一种单独的颜色去填充图形，而实际上，fillStyle也支持使用多种颜色去填充，比如下面的例子，随机生成了各种颜色去填充画布实现了彩虹的效果：

1. var a = 1;  
2. for (j = 0; j < 100; j++) {  
3. var r = 255, g = 0, b = 0;  
4. for (i = 0; i < 150; i++) {  
5. // 黄色  
6. if (i < 25) g += 10.2;  
7. // 绿色  
8. else if (i >= 25 && i < 50) r -= 10.2;  
9. // 蓝色  
10. else if (i >= 50 && i < 75) {  
11. g -= 10.2;  
12. 　b += 10.2;  
13. }  
14. // 紫色  
15. else if (i >= 75 && i < 100) r += 10.2;  
16. // 红色  
17. else b -= 10.2;  
18. context.fillStyle = “rgba(” + Math.floor(r) + “,” +  
19. Math.floor(g) + “,” + Math.floor(b) + “,” + a + “)”;  
20. context.fillRect(3 * i, 5 * j, 3, 5); } a -= 0.01; } 

如果不想使用以上的方法去生成渐变颜色，可以使用如下的canvas提供的几个方法去简便实现渐变效果：

 

 

addColorStop(offset, color) –addColorStop 方法接受 2 个参数，offset参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值

createLinearGradient(x0, y0, x1, y1) –该方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient(x0, y0, r0, x1, y1, r1) – 该方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

下面的代码演示了使用渐变的效果：

1. var gradient = context.createLinearGradient(0, 0,0, 145);  
2. gradient.addColorStop(0, “#00ABEB”);  
3. gradient.addColorStop(0.5, “yellow”);  
4. gradient.addColorStop(0.8, “green”);  
5. gradient.addColorStop(1, “white”);  
6. context.fillStyle = gradient;  
7. context.fillRect(5, 5, 145, 145);  

实现的效果如下图：

 

原文：http://tech.it168.com/a2011/1108/1270/000001270295_all.shtml