HTML5 canvas基本绘图之绘制线条

HTML5 canvas基本绘图之绘制线条

<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。

在<canvas>>元素上绘图主要有三步：

1.获取<canvas>元素对应的DOM对象，这是一个Canvas对象；
2.调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
3.调用CanvasRenderingContext2D对象进行绘图。

线条属性

除了上面用到的lineWidth属性，线条还有以下几个属性：

 •lineCap 属性设置或返回线条末端线帽的样式，可以取以下几个值：
“butt” 向线条的每个末端添加平直的边缘（默认）；
“round” 向线条的每个末端添加圆形线帽；
“square” 向线条的每个末端添加正方形线帽。

 •lineJoin 属性当两条线交汇时设置或返回所创建边角的类型，可以取以下几个值：
“miter” 创建尖角(默认)；
“bevel” 创建斜角；
“round” 创建圆角。

 •miterLimit 属性设置或返回最大斜接长度（默认为10）。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

 

JavaScript Code复制内容到剪贴板

1. var canvas = document.getElementById("canvas");   
2.     var context = canvas.getContext("2d");   
3.     //测试lineCap属性   
4.     //设置基准线便于观察   
5.     context.moveTo(10,10);   
6.     context.lineTo(10,200);   
7.     context.moveTo(200,10);   
8.     context.lineTo(200,200);   
9.     context.lineWidth="1";   
10.     context.stroke();   
11.     //butt   
12.     context.beginPath();   
13.     context.moveTo(10,50);   
14.     context.lineTo(200,50);   
15.     context.lineCap="butt";   
16.     context.lineWidth="10";   
17.     context.stroke();   
18.     //round   
19.     context.beginPath();   
20.     context.moveTo(10,100);   
21.     context.lineTo(200,100);   
22.     context.lineCap="round";   
23.     context.lineWidth="10";   
24.     context.stroke();   
25.     //square   
26.     context.beginPath();   
27.     context.moveTo(10,150);   
28.     context.lineTo(200,150);   
29.     context.lineCap="square";   
30.     context.lineWidth="10";   
31.     context.stroke();   
32.   
33.     //测试linJoin属性   
34.     //miter   
35.     context.beginPath();   
36.     context.moveTo(300,50);   
37.     context.lineTo(450,100);   
38.     context.lineTo(300,150);   
39.     context.lineJoin="miter";   
40.     context.lineWidth="10";   
41.     context.stroke();   
42.     //round   
43.     context.beginPath();   
44.     context.moveTo(400,50);   
45.     context.lineTo(550,100);   
46.     context.lineTo(400,150);   
47.     context.lineJoin="round";   
48.     context.lineWidth="10";   
49.     context.stroke();   
50.     //square   
51.     context.beginPath();   
52.     context.moveTo(500,50);   
53.     context.lineTo(650,100);   
54.     context.lineTo(500,150);   
55.     context.lineJoin="bevel";   
56.     context.lineWidth="10";   
57.     context.stroke();   
58.   
59.     //测试miterLimit属性   
60.     context.beginPath();   
61.     context.moveTo(700,50);   
62.     context.lineTo(850,100);   
63.     context.lineTo(700,150);   
64.     context.lineJoin="miter";   
65.     context.miterLimit="2";   
66.     context.lineWidth="10";   
67.     context.strokeStyle="#2913EC";   
68.     context.stroke();   
69.   

各属性的不同取值的效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。