获取 Canvas 对象
获取到 Canvas 的上下文环境的语法为:
canvas.getContext(contextType, contextAttributes);
上下文类型(contextType):
2d
(本小册所有的示例都是 2d 的):代表一个二维渲染上下文
webgl
(或"experimental-webgl"):代表一个三维渲染上下文
webgl2
(或"experimental-webgl2"):代表一个三维渲染上下文;这种情况下只能在浏览器中实现 WebGL 版本2 (OpenGL ES 3.0)。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
绘制路径
方法 | 属性 | 描述 |
---|---|---|
fill() | 填充路径 | |
stroke() | 描边 | |
arc(x,y,r,sAngle,eAngle,counterclockwise) | x:圆的中心的 x 坐标 y:圆的中心的 y 坐标 r:圆的半径 sAngle:起始角,以弧度计。(弧的圆形的三点钟位置是 0 度) eAngle:结束角,以弧度计。 counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
创建圆弧 |
rect(x,y,width,height) | 创建矩形 | |
fillRect(x,y,width,height) | 绘制矩形路径区域 | |
strokeRect(x,y,width,height) | 绘制矩形路径描边 | |
clearRect(x,y,width,height) | 在给定的矩形内清除指定的像素 | |
arcTo(x1,y1,x2,y2,r) | x1:弧的起点的 x 坐标 y1:弧的起点的 y 坐标 x2:弧的终点的 x 坐标 y2:弧的终点的 y 坐标 r:弧的半径 |
创建两切线之间的弧/曲线 |
beginPath() | 起始一条路径,或重置当前路径 | |
moveTo(x, y) | 把路径移动到画布中的指定点,不创建线条 | |
lineTo(x, y) | 添加一个新点,然后在画布中创建从该点到最后指定点的线条 | |
closePath() | 创建从当前点回到起始点的路径 | |
clip() | 从原始画布剪切任意形状和尺寸的区域 | |
quadraticCurveTo(cpx,cpy,x,y) | cpx:贝塞尔控制点的 x 坐标 cpy:贝塞尔控制点的 y 坐标 x:结束点的 x 坐标 y:结束点的 y 坐标 |
创建二次方贝塞尔曲线 |
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) | cp1x:第一个贝塞尔控制点的 x 坐标 cp1y:第一个贝塞尔控制点的 y 坐标 cp2x:第二个贝塞尔控制点的 x 坐标 cp2y:第二个贝塞尔控制点的 y 坐标 x:结束点的 x 坐标 y:结束点的 y 坐标 |
创建三次方贝塞尔曲线 |
isPointInPath(x, y) | 如果指定的点位于当前路径中,则返回 true,否则返回 false |
绘制直线的样式
样式 | 值 | 描述 |
---|---|---|
lineCap | butt:默认。向线条的每个末端添加平直的边缘 round:向线条的每个末端添加圆形线帽 square:向线条的每个末端添加正方形线帽 |
设置或返回线条的结束端点样式 |
lineJoin | bevel:创建斜角round:创建圆角 miter:默认。创建尖角。 |
设置或返回两条线相交时,所创建的拐角类型 |
lineWidth | number:当前线条的宽度,以像素计 | 设置或返回当前的线条宽度 |
miterLimit | number:正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示。 只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效。 |
设置或返回最大斜接长度 |
颜色、样式和阴影
属性 | 描述 |
---|---|
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
shadowColor | 设置或返回用于阴影的颜色 |
shadowBlur | 设置或返回用于阴影的模糊级别 |
shadowOffsetX | 设置或返回阴影距形状的水平距离 |
shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
设置渐变
方法 | 属性 | 描述 |
---|---|---|
createLinearGradient(x0,y0,x1,y1) | x0:渐变开始点的 x 坐标 y0:渐变开始点的 y 坐标 x1:渐变结束点的 x 坐标 y1:渐变结束点的 y 坐标 |
创建线性渐变(用在画布内容上) |
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") | image:规定要使用的图片、画布或视频元素。 | 在指定的方向上重复指定的元素 |
createRadialGradient(x0,y0,r0,x1,y1,r1) | x0:渐变的开始圆的 x 坐标 y0:渐变的开始圆的 y 坐标 r0:开始圆的半径 x1:渐变的结束圆的 x 坐标 y1:渐变的结束圆的 y 坐标 r1:结束圆的半径 |
创建放射状/环形的渐变(用在画布内容上) |
addColorStop(stop,color) | stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置 color:在结束位置显示的 CSS 颜色值 |
规定渐变对象中的颜色和停止位置 |
图形转换
方法 | 属性 | 描述 |
---|---|---|
scale(scalewidth,scaleheight) | scalewidth:缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) scaleheight:缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) |
缩放当前绘图至更大或更小 |
rotate(angle) | angle:旋转角度,以弧度计。如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。 | 旋转当前绘图 |
translate(x,y) | x:添加到水平坐标(x)上的值 y:添加到垂直坐标(y)上的值 |
重新映射画布上的 (0,0) 位置 |
transform(a,b,c,d,e,f) | a:水平缩放绘图 b:水平倾斜绘图 c:垂直倾斜绘图 d:垂直缩放绘图 e:水平移动绘图 f:垂直移动绘图 |
替换绘图的当前转换矩阵 |
setTransform(a,b,c,d,e,f) | a:水平旋转绘图 b:水平倾斜绘图 c:垂直倾斜绘图 d:垂直缩放绘图 e:水平移动绘图 f:垂直移动绘图 |
将当前转换重置为单位矩阵,然后运行 transform() |
图像绘制
方法 | 属性 | 描述 |
---|---|---|
drawImage(img,sx,sy,swidth,sheight,x,y,width,height) | img:规定要使用的图像、画布或视频 sx:可选。开始剪切的 x 坐标位置 sy:可选。开始剪切的 y 坐标位置 swidth:可选。被剪切图像的宽度 sheight:可选。被剪切图像的高度 x:在画布上放置图像的 x 坐标位置 y:在画布上放置图像的 y 坐标位置 width:可选。要使用的图像的宽度(伸展或缩小图像) height:可选。要使用的图像的高度(伸展或缩小图像) |
向画布上绘制图像、画布或视频 |