基本用法
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x, y)
ctx.stroke()
复制代码
图形
- 折线
- 方形
ctx.fillRect()
ctx.fillRect(25,25,25,25);
复制代码
绘制形状
- 圆
添加样式和颜色
色彩
ctx.fillStyle = color //设置图形的填充颜色
ctx.strokeStyle = color //设置图形轮廓的颜色
复制代码
设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。
透明度
ctx.globalAlpha = value; //数字在 0.0(完全透明)和 1.0(完全不透明)之间
复制代码
线型
lineWidth = value
复制代码
设置线条宽度。
lineCap = type
复制代码
设置线条末端样式。它可以为下面的三种的其中之一:butt,round 和 square。默认是 butt。
lineJoin = type
复制代码
设定线条与线条间接合处的样式。它可以是这三种之一:round, bevel 和 miter。默认是 miter。
miterLimit = value
复制代码
限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。
getLineDash()
复制代码
返回一个包含当前虚线样式,长度为非负偶数的数组。
setLineDash(segments)
复制代码
设置当前虚线样式。 lineDashOffset = value 设置虚线样式的起始偏移量
渐变
新建一个 canvasGradient 对象,并且赋给图形的 fillStyle 或 strokeStyle 属性。
-
createLinearGradient(x1, y1, x2, y2)
方法接受 4 个参数,表示渐变的起点 (x1,y1) 与终点 (x2,y2)。 -
createRadialGradient(x1, y1, r1, x2, y2, r2)
方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。
创建出 canvasGradient 对象后,我们就可以用 addColorStop 方法给它上色了。
gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数,position 参数必须是一个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对位置。例如,0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值(如 #FFF, rgba(0,0,0,1),等等)。
图案样式
createPattern(image, type)
复制代码
该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat
,repeat-x
,repeat-y
和 no-repeat
。
阴影
shadowOffsetX = float
shadowOffsetY = float
复制代码
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
shadowBlur = float
复制代码
shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
shadowColor = color
复制代码
shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。
填充规则
绘制文本
文本
fillText(text, x, y [, maxWidth])
复制代码
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
复制代码
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的
-
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 -
textAlign = value
文本对齐选项. 可选的值包括:start, end, left, right or center. 默认值是 start。 -
textBaseline = value
基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 -
direction = value
文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。
先进的文本测量
measureText()
复制代码
将返回一个 TextMetrics对象的宽度、所在像素,这些体现文本特性的属性。
使用图像
获得需要绘制的图片
anvas的API可以使用下面这些类型中的一种作为图片的源:
-
HTMLImageElement
这些图片是由Image()函数构造出来的,或者任何的元素 -
HTMLVideoElement
用一个HTML的<video>
元素作为你的图片源,可以从视频中抓取当前帧作为一个图像 -
HTMLCanvasElement
可以使用另一个<canvas>
元素作为你的图片源。 -
ImageBitmap
这是一个高性能的位图,可以低延迟地绘制,它可以从上述的所有源以及其它几种源中生成。
这些源统一由CanvasImageSource
类型来引用。
有几种方式可以获取到我们需要在canvas上使用的图片。
使用相同页面内的图片
-
document.images集合
-
document.getElementsByTagName()方法
-
如果你知道你想使用的指定图片的ID,你可以用document.getElementById()获得这个图片
使用其它域名下的图片
...未完待续