HTML5移动开发学习笔记之Canvas基础(2)_H5之家 - 中国HTML5教程资源分享第一站

39 ctx.stroke();}, false);

40 })();

41 </script>

42 </head>

43 <body>

44 hello HTML5!

45 <canvas id="c1" width="300" height="150" ></canvas>

46 </body>

47 </html>

复制代码

知识点：

1)描绘轮廓线

ctx.strokeStyle="#ff0000";

2)填充轮廓

ctx.fillStyle="#0000ff";

我自己从中练习的知识点应该是

1）匿名函数 (function(){})();的使用

2）window.addEventListener("load",function(){},false);

4.绘制方法的介绍

1) 绘制圆弧的arc()方法

arc()方法的语法如下：context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);

从指定的开始角度开始至结束角度为止，按指定方向进行圆弧绘制。最后的参数为ture时，将按逆时针旋转。角度不是“度”，而是“弧度”。

效果：

代码如下：

复制代码

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <style type="text/css">

6 canvas {

7 border-width: 5px;

8 border-style: dashed;

9 border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 <script type="text/javascript">

18 var canvas=document.getElementById("c1");

19 var ctx=canvas.getContext("2d");

21 //使用颜色填充矩形

22 ctx.fillStyle="#f00ff0";

23 ctx.fillRect(0,0,300,300);

24 //描绘圆弧

25 //路径开始

26 ctx.beginPath();

27 var startAngle=0;

28 var endAngle=120*Math.PI/180;

29 ctx.arc(100,100,100,startAngle,endAngle,false);

31 //绘制处理

32 ctx.strokeStyle="#ff0000";

33 ctx.lineWidth=3;

34 ctx.stroke();

35 </script>

36 </body>

37 </html>

复制代码

写完后对arc()方法了解多一点了。x,y是圆心的坐标，现在可以想象得出是怎样画出来的。。。

2）绘制圆弧的arcTo()方法

arcTo()方法的语法如下：

context.arcTo(x1,y1,x2,y2,半径);

此方法的功能是，从路径的起点和终点分别向坐标(x1,y1)、(x2,y2)绘制直线后，在绘制指定半径的圆弧。

效果：

代码如下：

复制代码

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <style type="text/css">

6 canvas {

7 border-width: 5px;

8 border-style: dashed;

9 border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 <script type="text/javascript">

18 var canvas=document.getElementById("c1");

19 var ctx=canvas.getContext("2d");

21 //使用颜色填充矩形

22 ctx.fillStyle="#f00ff0";

23 ctx.fillRect(0,0,300,300);

24 //描绘圆弧

25 //路径开始

26 ctx.beginPath();

27 ctx.moveTo(20,20);

28 ctx.arcTo(290,150,100,280,100);

29 ctx.lineTo(20,280);

31 //绘制处理

32 ctx.strokeStyle="#ff0000";

33 ctx.lineWidth=3;

34 ctx.stroke();

35 </script>

36 </body>

37 </html>

复制代码

自己改了下坐标，效果加深对这个方法的理解。。。

3）quadraticCurveTo()与bezierCurveTo()方法

① quadraticCurveTo()方法用于绘制二元抛物线，其语法格式如下。

context.quadraticCurveTo(cpx,cpy,x,y);

绘制由最后指定的位置开始至坐标(x,y)的曲线。此时，使用控制点为(cpx,cpy)的二元抛物线进行连接，并将位置(x,y)追加到路径中。

② bezierCurveTo()方法用于绘制三元抛物线，语法格式为:

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);