html5Canvas学习笔记(3)直线曲线

接着上2个笔记，笔者今天继续更新自己的学习笔记。如要看上2个笔记内容，可看：

直线和曲线涉及点不多，都是在路径创建的情况下使用。

直线

moveTo(x,y)//把当前点移动到指定的坐标x、y点上

lineTo(x,y)//和moveTo有点类似，也是把点移动到指定点，但是它还会把开始点和结束点连接起来，绘制一条直线

利用这2个函数，我们可以画出各图案，好像五角星之类，笔者在这里花了一个六芒星，就是用上面2个函数画出来的：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"/>
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7  window.onload=function(){
 8  var canvas=document.getElementById('canvas');
 9  if(canvas==undefined){
10  return false;
11  }
12  var context=canvas.getContext('2d');
13  
14 /*画外面的圆*/
15  context.beginPath();
16  context.arc(200,300,120,0,Math.PI*2,true);
17  context.fillStyle="#0ba0f3";
18  context.fill();
19  context.closePath()
20  
21 /*画里面的圆*/
22  context.beginPath();
23  context.arc(200,300,100,0,Math.PI*2,true);
24  context.fillStyle="#FFFFFF";
25  context.fill();
26  context.closePath();
27  
28 /*画向上的三角形*/
29  context.beginPath();
30  context.fillStyle="#0880c3";
31  context.moveTo(200,200);
32  context.lineTo(124,366);
33  context.lineTo(276,366);
34  context.lineTo(200,200);
35  context.closePath();
36  context.fill();
37  
38 /*画向下的三角形*/
39  context.beginPath();
40  context.fillStyle="#0ba0f3";
41  context.moveTo(200,400);
42  context.lineTo(124,236);
43  context.lineTo(276,236);
44  context.lineTo(200,400);
45  context.closePath();
46  context.fill();
47  }
48 </script>
49 </head>
50  
51 <body>
52 <h1>CanVas</h1>
53 <canvas id="canvas" width="600" height="600" />
54 </body>
55 </html>

在前面时候我说过怎么样能画一个四分之一圆?其实就是可以用到lineTo(x,y),我们在用arc函数画1/4圆之后，把点移动到圆心，连接了结束点和圆心，最后closePath便会把圆心和开始自动连接，完成四分之一的圆。

1 var c=document.getElementById('c1');
2 var cx=c.getContext('2d');cx.beginPath();
3 cx.arc(150,200,100,0,Math.PI/2,false);
4 cx.lineTo(150,200);//连接到圆心
5 cx.fillStyle="#666";
6 cx.fill();
7 cx.closePath();

曲线

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);//贝济埃曲线，x和y是终点坐标轴的x和y，cp1x和cp1y是开始点所在控制点的x和y，cp2x和cp2y是结束点所在控制点的x和y

quadraticCurveTo(cpx,cpy,x,y);//二次样条曲线，可以说是bezierCurveTo的精简版，只有一个控制点cpx横坐标和cpy纵坐标，其实就是上述把二个控制点在同一个位置

看了上述之后，可能还是不太清楚什么是控制点，如果有用过photoshop的钢笔工具的，可能就可以想象出来，因为钢笔工具画曲线时候，就有一个控制。还不清楚的看下图：

要记得，控制点是在曲线的切线上，而且是曲线凸出的那一方向。

作者利用曲线函数结合上面直线函数花了一个有趣的东西，吃豆人里面的“鬼”！！哈

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>综合例子</title>
 6 <script type="text/javascript">
 7  window.onload=function(){
 8  var c=document.getElementById('c1');
 9  var cx=c.getContext('2d');
10  //画吃豆人
11  cx.beginPath();
12  cx.arc(150,200,100,Math.PI/8,-Math.PI/8,false);
13  cx.lineTo(150,200);
14  
15  cx.fillStyle="#333";
16  cx.fill();
17  cx.closePath();
18  //画点
19  cx.beginPath();
20  for(var i=0;i<30;i++){
21  cx.fillRect(180+i*30,195,5,5);
22  }
23  cx.lineWidth=1;
24  cx.fillStyle="#000";
25  cx.fill();
26  //画鬼
27  var x=500;
28  var y=200;
29  dwGui(x,y,cx);
30  }
31  function dwGui(x,y,cx){
32  
33  cx.beginPath();
34  cx.moveTo(x,y);
35  cx.bezierCurveTo(x,y-80,x+120,y-80,x+120,y);
36  cx.lineTo(x+120,y+60);
37  cx.lineTo(x+100,y+30);
38  cx.lineTo(x+80,y+60);
39  cx.lineTo(x+60,y+30);
40  cx.lineTo(x+40,y+60);
41  cx.lineTo(x+20,y+30);
42  cx.lineTo(x,y+60);
43 cx.fillStyle="#333";
44  cx.fill();
45  cx.beginPath();
46  cx.moveTo(x+35,y-20);
47  cx.arc(x+35,y-20,20,0,Math.PI*2,false);
48  cx.moveTo(x+85,y-20);
49  cx.arc(x+85,y-20,20,0,Math.PI*2,false);
50  cx.fillStyle="#fff";
51  cx.fill();
52  
53 cx.beginPath();
54  
55  cx.moveTo(x+20,y-20);
56  cx.arc(x+20,y-20,10,0,Math.PI*2,false);
57  cx.moveTo(x+70,y-20);
58  cx.arc(x+70,y-20,10,0,Math.PI*2,false);
59  cx.fillStyle="#E6A5AD";
60  cx.fill();
61  cx.closePath();
62  }
63 </script>
64 </head>
65  
66 <body>
67 <canvas id="c1" width="1024" height="960"></canvas>
68 </body>
69 </html>

有兴趣的朋友可以拷贝代码保存为网页在火狐浏览器上浏览下研究。

林伟健前端博客

直线

曲线

公告