HTML5 Canvas画图(2)_H5之家 - 中国HTML5教程资源分享第一站

例子3：绘制直线，并且用直线组合复杂图形
1. /**
2. * This file is confidential by Charles.Wang
3. * Copyright belongs to Charles.wang
4. * You can make contact with Charles.Wang (charles_wang888@126.com)
5. */
6.
7. function drawLine(id){
8.
9.     var canvas=document.getElementById(id);
10.     if(canvas==null)
11.     return false;
12.     var context = canvas.getContext('2d');
13.     context.fillStyle="#FF00FF";
14.     context.fillRect(0,0,400,300);
15.
16.     var n=0;
17.     var dx=150;
18.     var dy=150;
19.     var s = 100;
20.     context.beginPath();
21.     context.fillStyle='rgb(100,255,100)';
22.     context.strokeStyle='rgb(0,0,100)';
23.     var x = Math.sin(0);
24.     var y = Math.cos(0);
25.     var dig=Math.PI/15*11;
26.     for(var i = 0;i<30;i++){
27.         var x = Math.sin(i*dig);
28.         var y = Math.cos(i*dig);
29.         //用三角函数计算顶点
30.         context.lineTo(dx+x*s,dy+y*s);
31.     }
32.     context.closePath();
33.     context.fill();
34.     context.stroke();
35. }
画出来的结果是：

例子4：使用线性渐变
1. /**
2. * This file is confidential by Charles.Wang
3. * Copyright belongs to Charles.wang
4. * You can make contact with Charles.Wang (charles_wang888@126.com)
5. */
6.
7. //渐变用于填充，是指填充图形时从某种颜色慢慢过渡到另外一种颜色
8. //线性渐变是指在一个线段之间进行渐变，线段上每个点随着离开起点的位移值的变化，其颜色也在变化
9. function drawLinearGradient(id){
10.
11.     var canvas = document.getElementById(id);
12.     if(canvas==null)
13.     return false;
14.
15.     //我们还是先绘制底图，这次，我们的底图也用了渐变
16.     var context = canvas.getContext('2d');
17.     //第一个渐变，用于底图，它调用了createlinearGradient创建了一个渐变
18.     //4个参数分别为起点的横坐标,起点的纵坐标，结束点的横坐标，结束点的纵坐标，所以本例就是从(0,0)到(0,300)，所以是一个竖直向下的渐变
19.     var gradient1=context.createLinearGradient(0,0,0,300);
20.     //addColorStop可以设置渐变的颜色，第一个参数表示偏移量（0-1）之间，第二个参数表示颜色
21.     //所以，我们定义了从黄色到蓝色的渐变
22.     gradient1.addColorStop(0,'rgb(255,255,0)');
23.     gradient1.addColorStop(1,'rgb(0,255,255)');
24.     //将上下文对象关联到当前的渐变设定作为填充风格
25.     context.fillStyle=gradient1;
26.     //用我们定义的渐变来绘制底图
27.     context.fillRect(0,0,400,300);
28.
29.     var n = 0;
30.     //这次我们要画一组圆圈，我们定义一个从(0,0)到(300,0)也就是水平方向从左到右的渐变
31.     var gradient2=context.createLinearGradient(0,0,300,0);
32.     //设置渐变色的起始颜色和终止颜色
33.     gradient2.addColorStop(0,'rgba(0,0,255,0.5');
34.     gradient2.addColorStop(1,'rgba(255,0,0,0.5)');
35.     //用循环画圆，并且用渐变色填充
36.     for(var i=0;i<10;i++){
37.         context.beginPath();
38.         context.fillStyle=gradient2;
39.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
40.         context.closePath();
41.         context.fill();
42.     }
43. }
画出来的结果是：