canvas
英音 /'kænvəs/ 美音 /'kænvəs/ 帆布, 画布
canvas的基本介绍
- canvas是html5中新增的一个画布标签。这个标签的默认宽高为300*150
-
- 设置
canvas
标签的宽高需要使用表格的形式,width
和height
属性
- 设置
-
- 设置
canvas
标签的宽高不建议使用css样式,因为会将画布拉伸
- 设置
-
canvas
标签中的内容,在支持canvas
的浏览器中不会显示出来,而不支持的浏览器中,会将canvas处理为div,所以内容会显示出来
-
- .
canvas
比较通用,在所有支持canvas的浏览器中,canvas的表现(API)都是一致的,不存在兼容性问题
- .
-
canvas
只是用来展示图像的东西,画图需要使用画图工具(画图上下文)
canvas的基本使用
-
首先要有canvas标签
-
获取canvas标签对象
-
通过canvas对象获取绘图上下文 2d -->
3d -->canvas.getContext("2d")
"webgl"
相关资料 -->three.js
- 语法: Canvas.getContext( typeStr ) > 描述: 1. 该方法用于绘制上下文工具. 2. 如果是绘制平面图形使用 '2d' 作为参数, 如果绘制立体图形使用 'webgl'. 3. 使用 '2d' 返回 CanvasRenderingContext2D 类型的对象. 4. 使用 'webgl' 返回 WebGLRenderingContext 类型的对象.
-
通过绘图上下文的
moveTo
方法设置绘图的起始点ctx.moveTo(x, y)
-
语法: CanvasRenderingContext2D.moveTo( x, y )
描述: 1. 该方法用于设置绘制起点. 2.其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
-
-
通过绘图上下文的
lineTo
方法设置画线的终点ctx.lineTo(x, y)
- 语法: CanvasRenderingContext2D.lineTo( x, y )
描述:
- 该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
- 其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.
-
通过绘图上下文的
stroke
方法描线ctx.stroke();
-
语法: CanvasRenderingContext2D.stroke()
描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.
-
绘制连续的线段
lineTo
方法可以将当前这个点保存,做为下次 lineTo
的起始点
绘制曲线
找到x和y的关系,循环遍历所有的x,通过x计算y,画出每一条线段,就能组合出一个曲线
- 贝塞尔曲线
closePath()
方法
closePath
可以用来闭合路径,将最后一个lineTo
的点和最后一个moveTo
的点连接起来
fill()方法
-
语法:
CanvasRenderingContext2D.fill()
-
描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.
用来填充闭合的图形,如果图形没有闭合,会自动闭合
非零环绕原则
在需要判断一个闭合的图形是不是会被填充的时候,从这个闭合的图形中拉出一条直线 判断经过直线的所有线段的方向,如果直线两边相反箭头的数量刚好相同,这个空间就不会被填充,反之则填充
注意:
- 在
canvas
中使用各种方法描点实际上描述的是一个称为路径(path
)的东西. - 在
canvas
绘图中, 所有描述的东西都是路径, 只有最后填充或描边的时候才会显示出效果. - 每一个路径都是一个状态.
路径的概念
-
路径中包含当前绘图上下文的所有状态,线宽,线的描边样式,填充样式
-
一个路径中所有的状态都是一致的,想要更改状态,必须重新开辟路径 -->
beginPath
beginPath
方法
beginPath
方法用来开辟新的路径。
- 在使用
beginPath
开辟新的路径之后,之前的路径状态会被保存,不会重置 - 在使用
beginPath
开辟新的路径之后,起始点会被清除,需要重新手动的moveTo
设置起始点
如果要使用新的状态,一定要使用beginPath
,否则,会影响之前所有同一路径下的绘图
线型相关的属性
|名称|描述| |--|--| |lineWidth
|设置绘图的线条宽度| |lineCap
|设置线两端的样式,可选的值有butt
(默认)round
(圆的)square
(方的)| |lineJoin
|设置两条线相交的拐点的样式,可选的值有miter
(默认尖的) round
圆的bevel
平的 |strokeStyle
|设置线条的颜色(可以使用所有css支持的颜色格式)| |fillStyle
|设置填充的颜色(可以使用所有css支持的颜色格式)| |setLineDash
|方法,用来设置虚线中空白和实线的宽度,参数为一个数组,数组中的元素,会被循环依次应用到虚线中的每一段线(虚线和实线)上| |getLineDash
|方法,用来获取虚线的宽度设置,获取到值是一个数组,如果不是虚线,就是空数组,否则是这个虚线的宽度设置数组| |lineDashOffset
|属性,设置虚线的偏移量,如果是正的就向左偏移,如果是负的,就向右偏移|
渐变色
不直接划一整条线,而是用每一个像素拼起来一条直线,每一个像素线段的颜色根据所在位置去计算
var cas = document.getElementById("c1"); var ctx = cas.getContext("2d"); //画一条颜色从黑色渐变到红色直线 //255,0,0 0,0,0 ctx.lineWidth = 100; for(var i = 0; i <= 255; i++){ ctx.beginPath(); ctx.moveTo(100 + i -1, 100); ctx.strokeStyle = "rgb("+i+",0,0)"; ctx.lineTo(100 + i, 100); ctx.stroke(); }