CanvasRenderingContext2D 对象
CanvasRenderingContext2D对象提供了一组用来在画布上绘制的图形函数。它们可以分为以下几类:
绘制矩形
可以使用strokeRect()
和fillRect()
来绘制矩形的边框和填充矩形。可以使用clearRect()
来清除矩形所定义的区域。
strokeRect()方法
strokeRect()
方法绘制矩形(不填色)。默认为黑色。
<script>
context.strokeRect(x,y,width,height);
</script>
参数 | 描述 |
---|---|
x | 矩形左上角的x坐标 |
y | 矩形左上角的y坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
fillRect()方法
fillRect()
方法绘制矩形(填色)。默认为黑色。
参数 | 描述 |
---|---|
x | 矩形左上角的x坐标 |
y | 矩形左上角的y坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
<script>
context.fillRect(x,y,width,height);
</script>
clearRect()方法
clearReact()
方法清空给定矩形内的指定像素。
参数 | 描述 |
---|---|
x | 要清除的矩形左上角的x坐标 |
y | 要清除的矩形左上角的y坐标 |
width | 要清除的矩形的宽度,以像素计 |
height | 要清除的矩形的高度,以像素计 |
<script>
context.clearRect(x,y,width,height);
</script>
绘制图像
在Canvas API中图像通过Image
对象来指定,或者通过用Image()
构造函数所创建的屏幕外图像来指定。一个Canvas对象也可以作为图像来源。
用drawImage()
方法在画布上绘制图像。也可以允许源图像的任意矩形区域缩放或绘制到画布上。
Image对象
Image
对象代表嵌入的图像。标签每次出现都会创建一个
Image
对象。
Image对象的属性
属性 | 描述 |
---|---|
align | 设置或返回与内联内容的对齐方式。 |
alt | 设置或返回无法显示图像时的替代文本。 |
border | 设置或返回图像周围的边框。 |
complete | 返回浏览器是否已完成对图像的加载。 |
height | 设置或返回图像的高度。 |
hspace | 设置或返回图像左侧和右侧的空白。 |
id | 设置或返回图像的id。 |
isMap | 返回图像是否是服务器端的图像映射。 |
longDesc | 设置或返回指向包含图像描述的文档的 URL。 |
lowsrc | 设置或返回指向图像的低分辨率版本的 URL。 |
name | 设置或返回图像的名称。 |
src | 设置或返回图像的 URL。 |
useMap | 设置或返回客户端图像映射的 usemap 属性的值。 |
vspace | 设置或返回图像的顶部和底部的空白。 |
width | 设置或返回图像的宽度。 |
Image对象的事件
事件 | 描述 |
---|---|
onabort | 当用户放弃图像的装载时调用的事件句柄。 |
onerror | 在装载图像的过程中发生错误时调用的事件句柄。 |
onload | 当图像装载完毕时调用的事件句柄。 |
drawImage()方法
drawImage()
方法绘制图像。
参数
参数 | 描述 |
---|---|
image | 所要绘制的图像。 这必须是表示 标记或者屏幕外图像的 Image 对象,或者是 Canvas 元素。 |
x,y | 要绘制的图像的左上角的位置。 |
width,height | 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。 |
sourceX,sourceY | 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。 |
sourceWidth, sourceHeight | 图像所要绘制区域的大小,用图像像素表示。 |
destX, destY | 所要绘制的图像区域的左上角的画布坐标。 |
destWidth, destHeight | 图像区域所要绘制的画布大小。 |
语法
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)
创建、渲染路径
绘制图形的框架或者给这些图形的内容涂色(填充)。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。
为构建一个封闭的形状, 因此这些绘制操作之间需要一个连接点。画布保存了一个当前位置来作为这个连接点。画布绘制操作将当前位置作为起始点,一直更新到终点,在画布上看就像是用笔画了一条线。当我们完成具体的操作(无论是画直线或是曲线)以后,当前位置会变更为操作的终点,也就是最后一个动作的终点。
我们可以在当前路径中画下多个不连续的图形。这时候我们就需要用上moveTo()
方法。这个方法的目的是将当前位置移动到一个新位置(不会添加连接线)。当你的路径写完以后,你可以用stroke()
方法绘制边框,也可以用fill()
方法填充路径。
绘制路径
moveTo()方法
将当前位置移到目标点。
参数
参数 | 描述 |
---|---|
x | 路径的目标位置的 x 坐标 |
y | 路径的目标位置的 y 坐标 |
context.moveTo(x,y);
stroke()方法
stroke()
方法会绘制出lineTo()
方法定义的路线,即边框。
context.stroke();
fill()方法
fill()
方法填充当前的路径。默认黑色。
context.fill();
可用的图形操作
绘制图形的操作有很多,例如绘制直线的lineTo
,绘制矩形的rect()
,绘制圆形的arc()
或arcTo()
,绘制曲线的bezierCurveTo()
和quadraticCurveTo()
。
lineTo()方法
lineTo()
方法添加一个新点,创建从当前位置到最后指定点的线条(不会直接在画布上创建线条)。
参数 | 描述 |
---|---|
x | 路径的目标位置的 x 坐标 |
y | 路径的目标位置的 y 坐标 |
context.lineTo(x,y);
rect()方法
rect()
方法创建矩形。此方法仅能创建一个矩形路径,边框或填充需要stroke()
或fill()
方法绘制。
参数 | 描述 |
---|---|
x | 矩形左上角的 x 坐标 |
y | 矩形左上角的 y 坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
context.rect(x,y,width,height);
arc()方法
arc()
方法创建弧/曲线。它用于创建圆、或部分圆。
参数 | 描述 |
---|---|
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
sAngle | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 |
eAngle | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
actTo()方法
actTo
方法在画布上创建介于两个切线之间的弧线。
参数 | 描述 |
---|---|
x1 | 弧的起点的 x 坐标 |
y1 | 弧的起点的 y 坐标 |
x2 | 弧的终点的 x 坐标 |
y2 | 弧的终点的 y 坐标 |
r | 弧的半径 |
context.fillRect(x1,y1,x2,y2,r);
bezierCurveTo()方法
bezierCurveTo()
方法在一个画布中开始子路径的一个新的集合。 这个方法用来画曲线的。参数如下。
参数 | 描述 |
---|---|
cpX1,cpY1 | 和曲线的开始点(当前位置)相关联的控制点的坐标。 |
cpX2,cpY2 | 和曲线的结束点相关联的控制点的坐标。 |
x,y | 曲线的结束点的坐标。 |
bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)
quadraticCurveTo()方法
quadraticCurveTo()
方法为当前路径添加一条贝塞尔曲线。
参数 | 描述 |
---|---|
cpX,cpY | 控制点的坐标 |
x,y | 曲线终点的坐标 |
quadraticCurveTo(cpX, cpY, x, y)