canvas绘图API详解

canvas绘图API详解

1.context的状态

• 矩阵变换属性

• 当前剪辑区域

• context的其他状态属性：

strokeStyle, fillStyle, globalAlpha,
lineWidth,lineCap, lineJoin,
miterLimit,shadowOffsetX, shadowOffsetY,
shadowBlur, shadowColor,
globalCompositeOperation,font,
textAlign, textBaseline.

• 相关方法

  • save() 保存当前绘图对象状态，

  • restore() 恢复之前保存的绘图对象的状态

2.路径规划

路径规划函数在使用的时候，都要保证存在一个子路径，比如调用过moveTo(), 因为要指定了起点才能绘制。

• moveTo(x,y) : 用给定的点创建一个新的子路径。将画笔移动到某一个位置

• closePath() : 标记为当前路径结束

• lineTo(x,y) 将画笔移动到某一个点，与上一个点相连接

• quadraticCurveTo(cpx, cpy, x, y) 规划贝塞尔二次曲线，前两个点是控制点x、y坐标，后两个是终点的x、y坐标

• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 规划贝塞尔三次曲线，与二次曲线不同的是，有两个控制点，绘制曲线更加灵活

• arcTo(x1, y1, x2, y2, radius) 给出一个控制点和终点，画一个与 用起点与控制点、控制点与终点形成的折线相切的圆弧。开始绘制的点不一定是起点，结束绘制的点也不一定是终点

• arc(x, y, radius, startAngle, endAngle [, counterclockwise ] ) 指定圆心、其实弧度、结束弧度以及半径，绘制一点圆弧，最后一个可选参数为绘制方向，表示顺时针绘制还是逆时针绘制

• rect(x, y, w, h) 绘制一个矩形

3.路径绘制

• beginPath() ：重置路径，开始一段新路径

    设置了绘制路径，context都会保持context的状态，只能通过beginPath方法来重置路径。

• fill() ：定义好绘制路径后，使用指定的fillStyle来填充闭合路径

• stroke() ：定义好绘制路径后，使用指定的strokeStyle来画线绘制

• drawFocusIfNeeded(element) ：如果给定的元素获取到了焦点，则给当前的路径绘制焦点

• clip() ：把当前路径限制到剪辑区域中。

    与路径规划函数等配合使用，将路径剪辑为特定的绘制区域，在clip之后绘制的图形只会显示在这个区域中。

• isPointInPath(x, y) ：判断某一个点是否在当前路径中。

4.填充和绘制样式

• fillStyle 可以返回或者设置填充的样式

这里的样式可以是一个cssstyle字符串，渐变色对象，canvasPattern（图片、视频或者canvasElement），无效的参数值将被忽略。

• strokeStyle 可以返回或者设置画线的样式

这里的样式可以是一个cssstyle字符串，渐变色对象，canvasPattern（图片、视频或者canvasElement），无效的参数值将被忽略。

• gradient

• gradient = context.createLinearGradient(x0, y0, x1, y1) 创建一个线性渐变，参数为起止点的坐标

• gradient.addColorStop(offset, color) 添加一个渐变转折点，可以添加多个

• gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1) 创建一个径向渐变，参数为内圆和外圆的圆心坐标和半径

• context.fillStyle=gradient 设置填充样式为指定的渐变样式

• pattern

• pattern = context.createPattern(image, repetition) 创建一个图像pattern，第二个参数为repeat方式，可选值与css背景repeat类似。

• context.fillStyle=pattern 设置填充样式为指定的pattern

5.lineStyles

     都是以属性赋值的方式设置对应的状态,例如:context.lineWidth=5;

• lineWidth 设置线条宽度

• lineCap 设置线条末端样式

  默认值是butt（左一），round是圆角， square是方角
  

• lineJoin 设置两线段连接处所显示的样子

  round, bevel 和 miter。默认是 miter。如图从上到下分别为round，bevel和miter
  

• miterLimit 用来设定外延交点与连接点的最大距离，如果交点距离大于此值，连接效果会变成了 bevel

  所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度

• setLineDash(segments) 设置当前虚线样式

• getLineDash 返回一个包含当前虚线样式，长度为非负偶数的数组。

• lineDashOffset 设置虚线样式的起始偏移量

6.Text styles

• font 获取或者设置字体样式，设置的值为css样式字符串。默认值是10px sans-serif

• textAlign 设置或者获取文本的左右对齐方式

  start,end,left,right,center.默认为start

• textBaseline 设置或者获取文本的垂直对齐方式

  "top", "hanging", "middle", "alphabetic", "ideographic", or "bottom" 默认为alphabetic

7.Transformations

• scale(x,y) 设置x，y方向的缩放

• rotate(angle) 设置旋转角度

• translate(x,y) 设置x，y方向的位移

• transform(a,b,c,d,e,f) a 水平缩放 d 垂直缩放 b 水平倾斜 c 垂直倾斜 e 水平位移 f 垂直位移

• setTransform(a,b,c,d,e,f) 重置当前transform，并设置为新的transform变换

8.绘制文字

• fillText(text,x,y,[maxWidth]) 使用设置好的文字填充状态绘制文字到指定的坐标 位置

• strokeText(text,x,y,[maxWidth]) 使用设置好的文字绘制状态绘制文字到指定的坐标 位置

• measureText(text) 测量文字实际的长度

  var width=cotext.measureText('hello').width; 目前只能获取到文字实际占用的宽度,必须使用其width属性

9.绘制图像

• drawImage(image, dx, dy) 绘制一个图像到画布上，dx、dy为图像左上角的x、y坐标

• drawImage(image, dx, dy, dw, dh) 绘制一个图像到画布上，dx、dy为图像左上角的x、y坐标，dw、dh为绘制到画布实际占用的宽高

• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 绘制一个图像到画布上，dx、dy为图像左上角的x、y坐标，dw、dh为绘制到画布实际占用的宽高，sw、sh为原始图像的宽高,sx,sy为原始图像左上角在原图中的坐标位置。 在做图像的缩放绘制时候也要用到
  

10.绘制矩形

• clearRect(x, y, w, h) 清除某一矩形区域内的内容，常用在动画制作中避免叠加，重复绘制

• fillRect(x, y, w, h) 用context状态填充一个矩形

• strokeRect(x, y, w, h) 用context状态绘制一个空心矩形

11.阴影

• shadowColor 设置或者获取context阴影颜色

• shadowOffsetX 设置或者获取阴影X方向偏移量

• shadowOffsetY 设置或者获取阴影Y方向偏移量

• shadowBlur 设置阴影模糊级别

如果要给多边形设置阴影，则要注意多边形或者圆环等图形的画笔绘制方向，只有多边形外部的才能增加阴影，而一个区域是否在多边形外部是与从其中引出的射线与两线相交出方向是否相反有关（数学知识）

12.Compositing 图像合成处理

• globalAlpha 设置或者返回全局不透明度的值，介于0.0-1.0之间，这个区域外的值将被忽略

• globalCompositeOperation 这个值定义了两个图形相交的时候怎么处理相交部分和各自单独部分。
  

source-over    默认。在目标图像上显示源图像。
source-atop    在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in    在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out    在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over    在源图像上方显示目标图像。
destination-atop    在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in    在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out    在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter    显示源图像 + 目标图像。
copy    显示源图像。忽略目标图像。
xor    使用异或操作对源图像与目标图像进行组合。

13.imageData处理

• imagedata = context . createImageData(sw, sh) 创建一个imagedata，参数为宽高值

• imagedata = context . createImageData(imagedata) 创建一个imagedata，参数为已创建的一个imagedata

• imagedata = context . getImageData(sx, sy, sw, sh) 获取某一点处指定宽高的像素信息

   imagedata中包含width、height和data属性，data中保存着像素信息，是一个一位数组，每四个元素是一个像素的信息，四个元素分别保存这r、g、b、a的值。可以对imagedata中的像素值做处理，以实现对图片进行像素级的处理来实现各种滤镜或者其他的效果

• context . putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ]) 使用给定的imagedata来将imagedata的全部像素信息绘制在画布上形成一个图像。

  • dx
    源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。

  • dy
    源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。

  • dirtyX [可选]
    在源图像数据中，矩形区域左上角X方向的位置。默认是整个图像数据的左上角（x 坐标）。

  • dirtyY [可选]
    在源图像数据中，矩形区域左上角Y方向的位置。默认是整个图像数据的左上角（y 坐标）。

  • dirtyWidth [可选]
    在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。

  • dirtyHeight [可选]
    在源图像数据中，矩形区域的高度。默认是图像数据的高度。

14.点击区域

• 在当前路径下添加一个点击区域

• 如果添加了点击区域，可以给canvas添加一个dom事件监听，在事件处理函数的event参数中可以获取到event.region属性。

• 这个api目前没有得到良好支持不能在生产环境使用。

• （1）addHitRegion(options) 给位图添加点击区域。它允许你很容易地实现一个点击区域，让你触发DOM元素的事件。options 参数是可选的。 当赋值时， Object 包含以下属性：

• • pathPath2D 对象： 描述点击区的区域范围。 如果不给此属性赋值， 则会使用当前的路径。

  • fillRule：
    遵循的填充规则（默认是“nonzero”）。

• id 点击区的ID，在事件中可以引用此ID，就像示例中那样。

• parentID 父区域的ID，为了光标回退或者辅助工具导航 。

• cursor 鼠标移动到点击区时的 cursor （默认是 "inherit"）。 继承父点击区域的光标，或者canvas元素的光标。

• control 触发事件的元素（canvas的子孙元素）。 默认为 null。

• label 如果没有control属性，文本标签作为辅助工具，用作点击区域的描述。 默认为 null。

• role 如果没有control属性，ARIA role 作为辅助工具，决定如何表示点击区域。 默认为 null.

• （2）removeHitRegion(id) 移除点击区域，参数为addHitRegon时传入的id

• （3）clearHitRegions() 清除画布上的所有点击区域