javascript canavs

创建元素使用2D

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

图像绘制

绘制矩形

fillRect(x,y,w,h) 绘制矩形
strokeRect(x,y,w,h) 绘制矩形边框
clearRect(x,y,w,h) 清除该矩形内填充清空画布
rect(x,y,w,h) 绘制矩形(不立即显示,只有调用绘制路径里面参数才绘制)

绘制路径

beginPath() 创建路径
closePath() 闭合路径
stroke() 路径轮廓
fill() 填充路径内容
moveTo(x,y)笔触起始点
lineTo(x,y) 移动笔触
arc(x, y, radius, startAngle, endAngle, anticlockwise) 弧线
arcTo(x1, y1, x2, y2, radius) ::根据指定点绘制弧线::
atcTo必须带上moveTo才可绘制出线

贝塞尔(bezier)以及二次贝塞尔

quadraticCurveTo(cp1x, cp1y, x, y) 绘制贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制二次贝塞尔曲线

Path2D 对象 ::暂不理解::::

为了简化代码和提高性能,Path2D对象用来缓存或记录绘画命令,这样你将能快速地回顾路径。
Path2D()
Path2D.addPath()

色彩 Colors

fillStyle 填充颜色
strokeStyle 边框颜色
globalAlpha 透明度
rgba

Line styles 线型

lineWidth设置线条宽度
lineCap 设置线条末端类型,butt,round 和 square
lineJoin 设定线条与线条间接合处的样式 round, bevel 和 miter。
miterLimit 限制当两条线相交时交接处最大长度;::未知效果::
getLineDash() 返回一个包含当前虚线样式,长度为非负偶数的数组。
setLineDash(segments) 设置当前虚线样式
lineDashOffset 设置虚线样式的起始偏移量。

渐变 Gradients

createLinearGradient(x1, y1, x2, y2) 表示渐变的起点 (x1,y1) 与终点 (x2,y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。//内圆心(x,y,r), 外圆心(x,y,r)
gradient.addColorStop(position, color) position表示渐变中颜色所在的相对位置,color颜色值

图案样式 Patterns

createPattern(image, type) Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。

阴影 Shadows

shadowOffsetX shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
shadowOffsetY shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
shadowBlur shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
shadowColor shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。

Canvas 填充规则

当我们用到 fill(或者 clip和isPointinPath )你可以选择一个填充规则,该填充规则根据某处在路径的外面或者里面来决定该处是否被填充,这对于自己与自己路径相交或者路径被嵌套的时候是有用的。restore

参数
“nonzero”: non-zero winding rule, 默认值.
“evenodd”: even-odd winding rule.
范例
ctx.fill("evenodd");

绘制文本

fillText(text, x, y , [, maxWidth])在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.

有样式的文本

font 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign 文本对齐选项. 可选的值包括:start, end, left, right or center. 默认值是 start。
textBaseline基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction 文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。

先进的文本测量

当你需要获得更多的文本细节时,下面的方法可以给你测量文本的方法。
measureText() 将返回一个 TextMetrics对象的宽度、所在像素,这些体现文本特性的属性。

使用图像 Using images

获取图片源

HTMLImageElement 这些图片是由Image()函数构造出来的,或者任何的\元素
HTMLVideoElement 用一个HTML的 \元素作为你的图片源,可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement 可以使用另一个 \ 元素作为你的图片源。
ImageBitmap 这是一个高性能的位图,可以低延迟地绘制,它可以从上述的所有源以及其它几种源中生成。

使用视频帧

你还可以使用\ 中的视频帧(即便视频是不可见的)。例如,如果你有一个ID为“myvideo”的\ 元素,你可以这样做:

绘制图片

一旦获得了源图对象,我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态,下面是最基础的一种。

drawImage(image, x, y) 其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。

缩放 Scaling

drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。
drawImage(image, x, y, width, height) 这个方法多了2个参数:width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小

切片 Slicing

drawImage 方法的第三个也是最后一个变种有8个新参数,用于控制做切片显示的。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的,后者参看下图

控制图像的缩放行为 Controlling image scaling behavior

Gecko 1.9.2 引入了 mozImageSmoothingEnabled 属性,值为 false 时,图像不会平滑地缩放。默认是 true 。

变形 Transformations

状态的保存和恢复 Saving and restoring state

在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法。
save()restore()
save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

移动 Translating

我们先介绍 translate 方法,它用来移动 canvas 和它的原点到一个不同的位置。
translate(x, y)

旋转 Rotating

第二个介绍 rotate 方法,它用于以原点为中心旋转 canvas。
rotate(angle)这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。

缩放 Scaling

接着是缩放。我们用它来增减图形在 canvas 中的像素数目,对形状,位图进行缩小或者放大。
scale(x, y) scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。

变形 Transforms

允许对变形矩阵直接修改。
transform(m11, m12, m21, m22, dx, dy)
这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵,在这里我们用下面的矩阵:
setTransform(m11, m12, m21, m22, dx, dy)这个方法会将当前的变形矩阵重置为单位矩阵,然后用相同的参数调用 transform 方法。如果任意一个参数是无限大,那么变形矩阵也必须被标记为无限大,否则会抛出异常。从根本上来说,该方法是取消了当前变形,然后设置为指定的变形,一步完成。
resetTransform()

组合 Compositing

我们不仅可以在已有图形后面再画新图形,还可以用来遮盖指定区域,清除画布中的某些部分(清除区域不仅限于矩形,像clearRect()方法做的那样 )以及更多其他操作。
globalCompositeOperation

类型

source-over (default): 这是默认设置,新图形会覆盖在原有内容之上。
destination-over:会在原有内容之下绘制新图形。
source-in:新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。
destination-in:原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的。
source-out:结果是只有新图形中与原有内容不重叠的部分会被绘制出来。
destination-out:原有内容中与新图形不重叠的部分会被保留。
source-atop:新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上。
destination-atop:原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形
lighter:两图形中重叠部分作加色处理。
darken:两图形中重叠的部分作减色处理。
xor:重叠的部分会变成透明。
copy:只有新图形会被保留,其它都被清除掉。

clip()我们使用 clip() 方法来创建一个新的裁切路径。默认情况下,canvas 有一个与它自身一样大的裁切路径(也就是没有裁切效果)。

基本的动画

可能最大的限制就是图像一旦绘制出来,它就是一直保持那样了。如果需要移动它,我们不得不对所有东西(包括之前的)进行重绘。重绘是相当费时的,而且性能很依赖于电脑的速度。

动画的基本步骤

清空 canvas

除非接下来要画的内容会完全充满 canvas (例如背景图),否则你需要清空所有。最简单的做法就是用 clearRect 方法。

保存 canvas 状态

如果你要改变一些会改变 canvas 状态的设置(样式,变形之类的),又要在每画一帧之时都是原始状态的话,你需要先保存一下。

绘制动画图形(animated shapes)

这一步才是重绘动画帧。

恢复 canvas 状态

如果已经保存了 canvas 的状态,可以先恢复它,然后重绘下一帧。

操控动画 Controlling an animation

setInterval(function, delay)
setTimeout(function, delay)
requestAnimationFrame 告诉浏览器你希望执行一个动画,并在重绘之前,请求浏览器执行一个特定的函数来更新动画