基本用法

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()获得这个图片

使用其它域名下的图片

...未完待续