html5 canvas API

一。canvas 是一个html 标签。必须先设置其 width 和 height 属性，指定可以绘图的区域大小。width、height、css可以随便的修改。主要用于2D 绘图。画图操作必须先设置颜色，然后画线。所有以 fill 开头的API 都只能使用 fillStyle 属性填充颜色，以 stroke 开头的 API 都只能使用 strokeStyle 属性进行描边。

二。API说明：这些参数的单位都是像素。

• getContext('2d')：获取画布。
• toDataURL(type)：导出画布，type 代码导出的类型。例如：type="image/png"。
• save()：保存操作可以保存多个步骤。保存的只是对绘图上下文的设置和变换
• restore()：恢复上一次保存的，可以一级一级返回。类似于撤销。必须先有save() 操作。
• createPattern(value, backgroundrepeat)：添加重复的图像.value 值 img、video、canvas。backgroundrepeat 等价于 background-repeat 的值。包括 "repeat"、"repeat-x"、 "repeat-y"和"no-repeat"
• getImageData(x, y, width, height)：获取画像数据。返回的对象都有三个属性：width、height 和 data。其中 data 属性是一个数组，保存着图像中每一个像素的数据。在 data 数组中，每一个像素用 4 个元素来保存，分别表示红、绿、蓝和透明度值。因此，第一个像素的数据就保存在数组的第 0 到第 3 个元素中，我可以通过对数据进行修改产生其他功能。实例参考链接
• putImageData(imageData, x, y)：imageData 通过 getImageData 返回的对象。用于绘制修改后的图像，

（1）绘制矩形：x 代表 x 坐标、y 代表 y 坐标、width 代表 宽度、height 代表 高度。

• fillRect(x, y, width, height)：绘制可填充颜色的矩形。
• strokeRect(x, y, width, height)：绘制可描边颜色的矩形。
• clearRect(x, y, width, height)：清除一个矩形区域。

（2）绘制路径：beginPath()：代表开始动作，主要用于画路径的时候。

• arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘 制一条弧线，弧线半径为 radius，起始和结束角度（用弧度表示）分别为 startAngle 和 endAngle。最后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算，值为 false 表示按顺时针方向计算。
• arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以 给定的半径 radius 穿过(x1,y1)。
• bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为 止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
• lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
• moveTo(x, y)：将绘图游标移动到(x,y)，不画线。
• quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并 且以(cx,cy)作为控制点。
• rect(x, y, width, height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由 width 和 height 指定。这个方法绘制的是矩形路径，而不是 strokeRect()和 fillRect()所绘制的独立的形状。
• closePath()、stroke()、fill()：对路径不描边并且不填充（closePath）、描边（stroke）、填充图形（fill）。设置样式在此方法之前设置。没有此方法无法绘制图形。
• clip()：创建一个剪切区域。

（3）绘制文本：text 代表值，maxWidth 代表最大宽度，部分浏览器不支持。

• fillText(text, x, y, maxWidth)：绘制填充的文本。
• strokeText(text, x, y, maxWidth)：绘制描边的文本。

（4）变换：

• rotate(angle)：围绕原点旋转图像 angle 弧度。
• scale(scaleX, scaleY)：缩放图像，在 x 方向乘以 scaleX，在 y 方向乘以 scaleY。scaleX 和 scaleY 的默认值都是 1.0。
• translate(x, y)：将坐标原点移动到(x,y)。执行这个变换之后，坐标(0,0)会变成之前由(x,y) 表示的点。
• transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改变换矩阵，方式是乘以如下 矩阵。

m1_1	m1_2	dx
m2_1	m2_2	dy
0	0	1

 

• setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：将变换矩阵重置为默认状态，然后再调用 transform()。

（5）绘制图形：

• drawImage(image, x, y, width, height, mX, mY, mWidth, mHeight)：image 代表图形资源。用于绘制图像到canvas上。x、y、width、height 分别代表源图片的x、y坐标 width、height宽高，以m开头的代表目标图片的。

（6）渐变：

• createLinearGradient(x, y, zX, zY)、createRadialGradient(x, y, radius，zX, zY，zRadius)：创建渐变区域。x、y代表起点坐标，zX、zY代表终点坐标。四个参数时创建的是矩形渐变、六个参数创建的是径向渐变。radius 代表半径。x、y代表圆心。
• addColorStop(num, color)：num 取值为0-1，color 代表颜色。得先创建渐变对象才能使用该方法。可以添加多个该API 已达到不同的效果。最后设置 fillStyle 或 strokeStyle 为这个对象。例如：context.fillStyle = gradient 。

 

三。属性说明。

• fillStyle：绘制图形的填充样式（背景颜色）。使用rgba 可以设置为透明的颜色。
• strokeStyle：边框颜色。使用rgba 可以设置为透明的颜色。
• shadowColor：用 CSS 颜色格式表示的阴影颜色，默认为黑色。
• shadowOffsetX：形状或路径 x 轴方向的阴影偏移量，默认为 0。
• shadowOffsetY：形状或路径 y 轴方向的阴影偏移量，默认为 0。
• shadowBlur：模糊的像素数，默认 0，即不模糊。
• lineWidth：控制线的宽度。
• lineCap：控制线末端是平头（butt）、圆头（round）还是方头（square）。
• lineJoin：可以控制线条相交的方式是圆交（round）、斜交（bevel）还是斜接（miter）。
• font：表示文本样式、大小及字体，用 CSS 中指定字体的格式来指定，例如"10px Arial"。
• textAlign：表示文本对齐方式。可能的值有"start"、"end"、"left"、"right"和"center"。 建议使用"start"和"end"，不要使用"left"和"right"，因为前两者的意思更稳妥，能同时 适合从左到右和从右到左显示（阅读）的语言。
• textBaseline：表示文本的基线。可能的值有"top"、"hanging"、"middle"、"alphabetic"、 "ideographic"和"bottom"
• globalAlpha：修改全局透明度。绘制前设置该属性则后面的绘制都继承该值，直到重新设置该属性为止。
• globalCompositionOperation：表示后绘制的图形怎样与先绘制的图形结合。可选值

source-over（默认值）	后绘制的图形位于先绘制的图形上方
source-in	后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明。
source-out	后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明。
source-atop	后绘制的图形与先绘制的图形重叠的部分可见，先绘制图形不受影响。
destination-over	后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见。
destination-in	后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明。
destination-out	后绘制的图形擦除与先绘制的图形重叠的部分。
destination-atop	后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明。
lighter	后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮
copy	后绘制的图形完全替代与之重叠的先绘制图形。
xor	后绘制的图形与先绘制的图形重叠的部分执行“异或”操作。

四。时钟实例：https://gitee.com/huangzuomin/canvas.git