html5canvas直线HTML5教程关于canvas的线条常识可以如许总结办法

序言

初次学习HTML5绘图canvas线条部分内容，特写下本篇博文总结，以供今后可以复习利用。
在本篇博文中，紧张记录在实际利用中须要把稳的事变，并记录一个由多个五角星组成的大略星云案例。
本文中不对详细的API利用方法进行解释，须要查看用法请自行搜索。

canvas公共部分

html5canvas直线HTML5教程关于canvas的线条常识可以如许总结办法 Bootstrap

HTML部分

HTML5中要利用canvas绘图，必须在HTML文件中利用<canvas>标签，不能换成其他标签。
该标签中可以包含一个id或者class属性，也可以不包括，只要能在操作DOM时找到指定canvas节点即可，建议最好利用id来表示，id具有唯一性，获取节点方便。
标签样式可以设置，也可以不设置。
在标签之间的内容为提示性语句，如果浏览器支持HTML5的<canvas>标签，该部分内容会被忽略，如果不支持，会显示该部分内容，代码示例如下，个中设置display是为了在不支持<canvas>标签的浏览器中能以块元素显示内容，如果不设置，会将自定义元素默认为内联元素。

123<canvas id=\"大众canvas\"大众 style=\"大众display: block;border:1px solid red;margin:50px auto\"大众> 您的浏览器不支持canvas绘图程序，请换用高版本IE浏览器或其他支持canvas的浏览器，如谷歌、火狐、oprea。
</canvas>

JavaScript部分

在常日情形下，我们都是等待DOM加载完毕后实行JavaScrip脚本内容，因此，我们须要在onload事宜中编写我们的脚本内容。

代码示例如下：

1234567window.onload=function(){ var canvas=document.getElementById(\"大众canvas\"大众); //获取画布DOM元素 canvas.height=800; //设置画布的高度 canvas.width=800; //设置画布的宽度 var context=canvas.getContext(\公众2d\公众); //声明绘制的图形为2d类型 //下面是详细的绘图内容}

通过示例可以看到，绘图时要先找到canvas节点，再通过其getContext方法得到绘图区，个中canvas变量，全体canvas标签的区域，即画布的宽高，及图形类型”2d”或”3d”都可以根据实际自行定义，但API不能改换，这部分是绘制所有canvas图形时都须要有的部分。

直线绘图API总结

API功能总结

(1). canvas.moveTo(x,y)

功能：与我们利用笔来画线类似，这个函数类似于将笔尖移动到指定的点，即坐标(x,y)。

利用场景：在canvas初始化后或者调用canvas.beginPath()后用来设置出发点。
其余，在须要绘制不连续的线段时，也须要利用此方法移动目标点。

下面是从FireFox官网MDN网站上摘取的一个绘制笑脸图案的代码（arc方法用来绘制弧形）：

12345678910111213141516function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI2,true); // 绘制 ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // 口(顺时针) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI2,true); // 左眼 ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI2,true); // 右眼 ctx.stroke(); }}

(2). context.lineTo(x,y)

功能：绘制一条从当前到指定位置坐标(x,y)的一条直线。

利用场景：直线的出发点可以利用context.moveTo(x,y)来设置，再利用context.lineTo(x,y)将两个点连成一条线段，也可以只利用两个context.lineTo(x,y)来连成一条线段。
当须要多条线段时，可以利用多个context.lineto(x,y)连接。

绘制一条直线的例子：

123context.lineTo(100,200);context.lineTo(500,500);context.stroke();

(3). context.stroke()

功能：通过线条来绘制图形轮廓，只有利用了该方法，才能在屏幕上显示出线条。

(4). context.strokeStyle=”[color]”

功能：设置线条的颜色。
color值为CSS支持的所有种类颜色值。

(5). context.beginPath()

功能：新建一条路径，即重新开始一段绘图路径。

利用场景：须要绘制不同颜色线条、不同添补色等线条图形时，须要利用context.beginPath()和context.closePath()包围绘图区块。

(6). context.closePath()

功能：与context.beginPath()相反，该方法关闭区域，当绘制闭合的图形时须要利用这对方法。

(7). context.fillStyle=”[color]”

与context.strokeStyle类似，不同点是，该方法用来添补内部区颜色，颜色值也同样是CSS支持的所有值。

(8). context.fill()

与context.stroke()类似，不同的是，该方法对线段组成的图形进行内部颜色添补。

把稳：canvas绘图时，后面的绘制的图形如果与前面绘制的图形有重叠，那么后面的图形将显示在上层，下层图形会被覆盖，如果上层图形设置了透明度，下面的图形覆盖部分将会有部分颜色显示。
因此，在实际利用中，须要先利用context.fill()再利用context.stroke()，可以防止线条被添补的颜色覆盖。

在一个canvas标签内绘制多个不同颜色等标签时，利用context.beginPath()和context.closePath()绘制时，将stroke放在后面，而利用context.fillRect()时需放方法前面，否则会涌现样式覆盖问题。
如果想所有的样式同等，可以值设置一个样式。

下面是一个小的示例：

功能：直接绘制矩形，x,y是出发点坐标，width和height是矩形的宽和高。

利用场景：绘制指定宽高矩形时可以直策应用，绘制出来的是空心的矩形。
如果须要自定义样式，在需求多个图形样式有各自的风格时，必须在调用该方法之前设置fillStyle或strokeStyle方法。

(10). context.fillRect(x,y,width,height)

功能：直接绘制添补颜色的矩形。
设置样式如context.rect()

(11). context.lineCap=”[value]”

功能：在线段两端添加特定样式，value值为：butt，默认，添加平直的边缘；round，添加圆形线帽；square，添加正方形线帽。

下面是展示几种不同属性值的样式代码示例：

功能：设置两条线段相交的样式，如>交卸的地方即由此方法设置。
value值有：bevel，创建斜角；round，创建圆角；miter 默认，创建尖角。

(13). context.lineWidth=value

功能：设置线条的粗细，value为数值，如context.lineWidth=1。