Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

我就是我 2022-08-10 12:58 270阅读 0赞

来源：[http://www.ido321.com/968.html][http_www.ido321.com_968.html]

一、Canvas的基础知识

Canvas是HTML 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域，需要利用JavaScript编写在其中进行绘画的脚本。

在页面放置canvas元素很简单，利用<canvas>标签，同时指定几个基本的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^\_^~~~

二、Canvas小案例（测试结果来自Google最新版本）

1、绘制矩形

canvas.html:

1: <!DOCTYPE >

2: <html>

3: <head>

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

5: <title>canvas元素学习</title>

6: <script type="text/javascript" src="canvas.js">

7: </script>

8: </head>

9: <body>

10:     <h3>canvas元素学习</h3>

11:     <canvas id="canvas" width="400" height="300"></canvas>

12: </body>

13: </html>

canvas.js:

1: window.οnlοad=function()

2: {

3:     // 获取canvas 的ID

4:     var canvas = document.getElementById('canvas');

5:     if (canvas == null)

6:     {

7:         return false;

8:     }

9:     // 获取上下文

10:     var context = canvas.getContext('2d');

11:     // 设置填充的样式

12:     context.fillStyle = "#eeeeff";

13:// 绘制矩形,以fillStyle填充，fillRect（strokeRect）前两个参数是矩形左上角位置,后两个参数分别是宽和高

//默认原点是canvas的左上角

14:     context.fillRect(0,0,400,300);

15:     context.fillStyle = 'red';

16:     // 设置边框的样式

17:     context.strokeStyle = 'blue';

18:     // 设置边框大小

19:     context.lineWidth = 2;

20:     context.fillRect(50,50,100,100);

21:     // 绘制矩形边框

22:     context.strokeRect(50,50,100,100);

23: }

效果：

![SouthEast][]

2、绘制圆形：使用路径绘制

1: // 获取canvas 的ID

2:     var canvas = document.getElementById('canvas');

3:     if (canvas == null)

4:     {

5:         return false;

6:     }

7:     // 获取上下文

8:     var context = canvas.getContext('2d');

9:     // 设置填充的样式

10:     context.fillStyle = "#eeeeff";

11:     // 绘制矩形,以fillStyle填充

12:     context.fillRect(0,0,400,300);

13:     for(var i = 0; i<9; i++)

14:     {

15:         // 创建路径

16:         context.beginPath();

17:         // 绘制圆形路径

18:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

19:         // 关闭路径，如果不关闭，则图像会重叠

20:         context.closePath();

21:         context.fillStyle = 'rgba(255,0,0,0.25)';

22:         // 以fillStyle填充

23:         context.fill();

24:     }

arc()绘制圆弧，其参数如下

arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y是圆弧的圆心位置，radius是半径，startAngle和endAngle是起始和结束的角度，单位是弧度（度数必须转为弧度），anticlockwise是一个布尔值，true表示顺时针绘制图像，false表示逆时针绘制。起始角度是0，结束角度是360（PI\*2）就可以绘制圆形。

效果：

![SouthEast 1][]

3、绘制直线

绘制直线用到moveTo()和lineTo()两个方法

1: // 获取canvas 的ID

2:     var canvas = document.getElementById('canvas');

3:     if (canvas == null)

4:     {

5:         return false;

6:     }

7:     // 获取上下文

8:     var context = canvas.getContext('2d');

9:     // 设置填充的样式

10:     context.fillStyle = "#eeeeff";

11:     // 绘制矩形,以fillStyle填充

12:     context.fillRect(0,0,400,300);

13: context.beginPath();

//参数线的起点坐标

14: context.moveTo(50,50);

//参数线的终点坐标

15:     context.lineTo(100,100);

16: context.closePath();

//关闭路径之后绘制图形

17:     context.strokeStyle = 'red';

18:     context.stroke();

效果：

![SouthEast 2][]

绘制一个复杂点的

1: // 获取canvas 的ID

2:     var canvas = document.getElementById('canvas');

3:     if (canvas == null)

4:     {

5:         return false;

6:     }

7:     // 获取上下文

8:     var context = canvas.getContext('2d');

9:     // 设置填充的样式

10:     context.fillStyle = "#eeeeff";

11:     // 绘制矩形,以fillStyle填充

12:     context.fillRect(0,0,400,300);

13:     var dx = 150;

14:     var dy = 150;

15:     var s  = 100;

16:      // 创建路径

17:      context.beginPath();

18:      context.fillStyle = 'rgb(100,255,100)';

19:      context.strokeStyle = 'rgb(0,0100)';

20:      var x = Math.sin(0);

21:      var y = Math.cos(0);

22:      var dig = Math.PI/15 *11;

23:      for (var i = 0; i < 30; i++) {

24:          var x = Math.sin(i * dig);

25:          var y = Math.cos(i * dig);

26:          context.lineTo(dx+x*s,dx+y*s);

27:      }

28:      context.closePath();

29:      context.fill();

30:      context.stroke();

效果：

![SouthEast 3][]

4、绘制曲线：利用bezierCurveTo绘制贝济埃曲线

bezierCurveTo可以绘制曲线，是lineTo的曲线版本

1: // 获取canvas 的ID

2:     var canvas = document.getElementById('canvas');

3:     if (canvas == null)

4:     {

5:         return false;

6:     }

7:     // 获取上下文

8:     var context = canvas.getContext('2d');

9:     // 设置填充的样式

10:     context.fillStyle = "#eeeeff";

11:     // 绘制矩形,以fillStyle填充

12:     context.fillRect(0,0,400,300);

13:     var dx = 150;

14:     var dy = 150;

15:     var s  = 100;

16:      // 创建路径

17:      context.beginPath();

18:      context.fillStyle = 'rgb(100,255,100)';

19:      context.strokeStyle = 'rgb(0,0100)';

20:      var x = Math.sin(0);

21:      var y = Math.cos(0);

22:      var dig = Math.PI/15 *11;

23:      context.moveTo(dx,dy);

24:      for (var i = 0; i < 30; i++) {

25:          var x = Math.sin(i * dig);

26:          var y = Math.cos(i * dig);

27:          context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);

28:      }

29:      context.closePath();

30:      context.fill();

31:      context.stroke();

效果

![SouthEast 4][]

下一篇：[Canvas入门（2）:图形渐变和图像形变换][Canvas_2]

[http_www.ido321.com_968.html]: http://www.ido321.com/968.html
[SouthEast]: /images/20220810/f84d9ce49a904af5bc62289067489fc3.png
[SouthEast 1]: /images/20220810/af437a20db1f4c08a34b1c2bc1ddafc7.png
[SouthEast 2]: /images/20220810/87cbd2c54b3548b48eb91d5af88e6b05.png
[SouthEast 3]: /images/20220810/512ef75435bb49d0a32c3605c03fb34c.png
[SouthEast 4]: /images/20220810/d20e2870739b482eadd02a6419ba63aa.png
[Canvas_2]: http://www.ido321.com/986.html