canvas学习笔记

canvas学习笔记

canvas 元素

1
<canvas id="tutorial" width="150" height="150></canvas>

<canvas> 元素和 <img> 元素很像,但没有 src 和 alt 属性。<canvas> 标签只有两个属性 widthheight。也可以使用 DOM 的属性来设置,当没有设置宽度和高度时,canvas会初始化宽度为300像素和高度为150像素。

<canvas> 元素可以像任何一个普通的图像一样,有 marginborder 以及 background 等属性。

<canvas> 标签中可以提供替换内容。不支持 <canvas> 的浏览器将会忽略容器并在其中渲染后备内容。而支持 <canvas> 的浏览器将会忽略在容器中包含的内容,并且只是正常渲染canvas。

1
2
3
<canvas id="canvas">
当前浏览器不支持Canvas,请更换浏览器后再试
</canvas>

canvas 起初是空白的,首先脚本需要找到 渲染上下文,然后在它的上面绘制。<canvas> 元素有一个 getContext() 的方法,这个方法是用来获取渲染上下文和它的绘画功能的。该方法只有一个参数,上下文的格式

1
2
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

基本概念

  • canvas.width;
    设置画布的宽度(默认值为 300px)

  • canvas.height;
    设置画布的高度(默认值为 150px)

  • var context = canvas.getContext('2d');
    获取画布的渲染上下文环境,canvas是一个基于状态的绘制机制

路径

  • context.beginPath();
    新建一条路径,生成之后,图形绘制命令被指向路径上生成路径

  • context.closePath();
    闭合路径之后图形绘制命令又重新指向到上下文中

  • context.moveTo(x, y);
    将笔触移动到指定的坐标 (x, y) 上

  • context.lineTo(x, y);
    绘制一条从当前描点位置到 (x, y) 上的直线

  • context.quadraticCurveTo(cpx, cpy, x, y)
    绘制一条二次贝塞尔曲线路径。需要两个点,第一个点是控制点,第二个点是终点。起始点是当前路径的最后一个点。绘制贝塞尔曲线之前可是使用 moveTo() 方法进行修改。

  • context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
    绘制一条三次贝塞尔曲线路径的方法,第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点。绘制贝塞尔曲线之前可是使用 moveTo() 方法进行修改。

  • context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
    绘制一个圆弧路径,圆弧的圆心在 (x, y) 位置,半径为 r,根据 anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束

  • context.arcTo(cpx1, cpy1, cpx2, cpy2, radius)
    使用当前的描点(前一个 moveTolineTo 等函数的止点)。根据这个描点与给定的控制点1 (cpx1, cpy1) 连接的直线和控制点1 (cpx1, cpy1) 与控制点2 (cpx2, cpy2)连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径。

  • context.rect(x, y, width, height)
    绘制一条矩形路径,矩形的起点位置是 (x, y),尺寸为width 和 height。矩形的4个点通过直线连接。

绘制路径轮廓或填充路径的有关属性与方法

  • context.lineWidth = value;
    设置路径宽度的数字,默认为 1.0

  • context.lineCap = "butt"/"round"/"square";
    绘制每一条线段末端的属性,butt 末端以方形结束(默认值),round 末端以圆形结束,square末端以方形结束(增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域)

  • context.lineJoin = "miter"/"round"/"bevel";
    绘制两条线段、圆弧或曲线如何连接在一起的属性,miter 通过延伸相连的部分的外边缘,使其相交于一点,形成一个额外的菱形区域(默认值),round 通过填充一个额外的,圆心在相连部分末端的扇形(半径为线段宽度),绘制拐角的形状。bevel 在相连部分的末端填充一个额外的以三角为底的区域

  • context.miterLimit = value;
    设置斜接面限制比例的属性,即 context.lineJoin = "miter" 时,延伸相连部分的斜边长度,默认为10。超过此限制,则自动设置 context.lineJoin = "bevel"

  • context.strokeStyle = color || gradient || pattern;
    设置轮廓的颜色和样式,默认值是 #000

  • context.fillStyle = color/gradient/pattern;
    设置填充区域的颜色和样式,默认值是 #000

  • context.getLineDash()

    返回当前线段样式的数组,数组包含一组数量为偶数的非负数数字。

  • context.setLineDash()

    设置当前的线段样式。

  • context.lineDashOffset

    描述在哪里开始绘制线段。

绘制路径

  • context.stroke();
    通过线条来绘制图形轮廓

  • context.fill();
    通过填充路径的内容区域生成实心的图形。如果先使用 stroke() 方法,后使用 fill() 方法的话,填充会覆盖一般宽度的轮廓

  • context.clip()
    从当前路径创建一个剪切路径。在 clip() 调用之后,绘制的所有信息只会出现在剪切路径内部。

  • context.isPointInPath(x, y)

    判断在当前路径中是否包含监测点的方法。(默认使用 非零环绕原则

  • context.fillRect(x, y, width, height);
    创建绘制填充矩形的方法,起点位置是 (x, y),尺寸为 width 和 height。fillStyle 属性决定矩形的样式

  • context.strokeRect(x, y, width, height);
    使用当前的绘画样式,描绘一个起点在 (x, y) 、宽度为 width 、高度为 height 的矩形的方法

  • context.clearRect(x, y, width, height);
    指定区域内,以点 (x, y) 为起点,范围是 (width, height) 所有像素变成透明,擦除之前绘制的所有内容

文本绘制的属性与方法

  • context.font

    字体设置。可使用的设置为font-stylefont-variantfont-weightfont-size 以及 font-family,默认值 10px sans-serif

  • context.textAlign

    文本对齐设置。 允许的值: start (默认), end, left, right 或 center

  • context.textBaseline

    基线对齐设置。 允许的值: top, hanging, middle, alphabetic (默认),ideographic, bottom

  • context.direction

    文本的方向。 允许的值: ltr, rtl, inherit (默认)

  • context.fillText(text, x, y, maxWidth)

    描述了一种在 (x, y)位置填充文本的方法。并且如果第四个参数提供最大宽度的话,文本会进行缩放以适应最大宽度。

  • context.strokeText(text, x, y, maxWidth)

    描述了一种在 (x, y)位置绘制文本轮廓的方法。并且如果第四个参数提供最大宽度的话,文本会进行缩放以适应最大宽度。

  • context.measureText(text)

    返回一个包含关于文本尺寸的信息,在使用此方法直线最好先设置 context.font

渐变和图案

  • context.createLinearGradient(x0, y0, x1, y1)

    创建一个沿 (x0 ,y0) 到 (x1, y1) 的直线的渐变,并返回一个渐变对象 CanvasGradient

  • context.createRadialGradient(x0, y0, r0, x1, y1, r1)

    创建一个沿 (x0 ,y0) 半径为 r0 到 (x1, y1) 半径为 r1 的径向的渐变,并返回一个渐变对象 CanvasGradient

  • context.createPattern(image, repetition)

    创建一个使用指定的图像创建模式的方法,并可通过指定 repetition 参数在指定方向上重复图像,返回一个 CanvasPattern 对象。imgae 可以是 <img><video><canvas> 以及 imageData等,repetition 可以是 repeatrepeat-xrepeat-y 以及 no-repeat

阴影

  • context.shadowBlur = level

    描述模糊效果。 默认 0

  • context.shadowColor = color

    阴影的颜色。 默认fully-transparent black.

  • context.shadowOffsetX = offset

    阴影水平方向的偏移量。 默认 0.

  • context.shadowOffsetY = offset

    阴影垂直方向的偏移量。 默认 0.

变换

  • context.rotate(angle)

    以顺时针旋转相应的弧度值,旋转中心点一直是 canvas 的起始点

  • context.scale(x, y)

    根据水平方向和垂直方向,缩放相应的 xy 倍数

  • context.translate(x, y)

    在网格中移动 canvas 和 canvas 原点 x 水平方向、原点 y 垂直方向

  • context.transform(a, b, c, d, e, f)

    使用矩阵多次叠加当前变换的方法,该矩阵有方法的参数进行描述,并且可以使用该矩阵缩放,旋转,移动和倾斜当前上下文。其中 a 表示水平缩放,b 表示水平倾斜,c 表示垂直倾斜,d 表示垂直缩放,e 表示水平移动,f 表示垂直移动。

  • context.setTransform(a, b, c, d, e, f)

    使用单位矩阵重新设置(覆盖)当前的变换并调用变换的方法

合成

  • context.globalAlpha = value

    在合成到 canvas 之前,设置图形和图像大的透明度值(1.0 ~ 0.0)。默认为 1.0,不透明

  • context.globalCompositeOperation = type

    设置要在绘制新形状时应用的合成操作类型,其中 type 是用于标识要使用的合成或混合模式操作的字符串,有十一种取值分别是source-over(default)source-atopsource-insource-outdestination-overdestination-atopdestination-indestination-outlightercopyxor

绘制图像

  • context.draw(image, dx, dy)

    image 为绘制到上下文的元素,可以是 <img><video><canvas>
    dx 为目标画布的左上角在目标 canvas 上 X 轴的位置
    dy 为目标画布的左上角在目标 canvas 上 Y 轴的位置

  • context.draw(image, dx, dy, dWidth, dHeight)

    dWidth 为目标画布上绘制图像的宽度,默认不缩放
    dHeight 为目标画布上绘制图像的高度,默认不缩放

  • context.draw(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

    sx 需要绘制到目标上下文中,源图像的矩形选择框的左上角 X 坐标
    sy 需要绘制到目标上下文中,源图像的矩形选择框的左上角 Y 坐标
    sWidth 需要绘制到目标上下文中的,源图像的矩形选择框的宽度,默认从 (sx, sy) 到 右下角结束
    sHeight 需要绘制到目标上下文中的,源图像的矩形选择框的高度,默认从 (sx, sy) 到 右下角结束

像素控制

  • context.createImageData()

使用指定的尺寸,创建一个新的、空白的 ImageData 对象。所有的像素在新对象中都是透明的。

  • context.getImageData(sx, sy, sw, sh)

返回一个 ImageData 对象,用来描述canvas区域隐含的像素数据,这个区域通过矩形表示,起始点为(sx, sy)、宽为
sw、高为sh。

  • context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

将数据从已有的 ImageData 绘制到位图上。 如果提供了脏矩形,只能绘制矩形的像素。

canvas 状态

  • context.save()

    使用栈保存当前的绘画样式状态,包括线的样式、填充样式、阴影样式、文本样式。你可以使用 restore() 恢复任何改变。

  • context.restore()

    恢复到最近的绘制样式状态,此状态是通过 save() 保存到”状态栈“中最新的元素。