canvas元素
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
创建 context 对象：
var cxt=c.getContext("2d");
绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
坐标
画布的 X 和 Y 坐标用于在画布上对绘画进行定位
原点位于画布左上角，X轴水平向右延伸，Y周垂直向下延伸。
浏览器支持
使用 id 来寻找 canvas 元素
获取 context 对象，是否为空
绘制
基本图形
线条
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
矩形
ctx.fillRect(20, 20, 150, 100);
圆形
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
三角形
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.closePath();
cxt.stroke();
清空画布
cxt.clearRect(0,0,200,200);
贝塞尔曲线
二次
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
三次
三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)
路径
- 开始路径 - beginPath()
- 移动到一个点 - moveTo()
- 在路径中绘制 - lineTo()
- 绘制路径 - stroke()
变换
画布状态
save()
保存当前上下文的状态。
restore()
返回之前保存的路径状态和属性。
移动坐标
translate(x,y)
重新映射画布上的 (0,0) 位置。
x 添加到水平坐标（x）上的值。
y 添加到垂直坐标（y）上的值。
旋转坐标
rotate(angle)
旋转当前图形。
angle,旋转角度，以弧度计。
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
缩放图形
scale(scalewidth,scaleheight )
放大或缩小当前图形。
scalewidth 缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。
scaleheight 缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。
矩阵变换
transform(a,b,c,d,e,f)
替换绘图的当前转换矩阵。
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。
setTransform(a,b,c,d,e,f)
将当前转换重置为单位矩阵。然后运行 transform()。
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。
组合
透明度值
设置或返回绘图的当前透明值
0.0（完全透明） 与 1.0（不透明） 之间的数字
默认1.0
新图像绘制
设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上
source-over 默认。 在目标图像上显示源图像。
destination-over 在源图像上方显示目标图像。
source-atop 在目标图像上方显示源图像。源图像位于交集外的部分是透明
destination-atop 在源图像上方显示目标图像。目标图像位于交集外部分是透明
source-in 显示源图像。 只显示交集部分，目标图像是透明
destination-in 显示目标图像。只显示交集部分，源图像是透明
source-out 显示源图像。 只显示非交集部分，目标图像是透明
destination-out 显示目标图像。只显示非交集部分，源图像是透明
darker 显示源图像 + 目标图像，重叠部分减色。
lighter 显示源图像 + 目标图像，重叠部分加色。
copy 显示源图像。chrome无效，opera11.5有效。
xor 重叠部分透明。
默认：source-over
裁剪
clip()
方法从原始画布中剪切任意形状和尺寸
提示：
一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内。
可以在使用 clip() 方法前，通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
颜色
添加渐变
addColorStop()
方法规定渐变对象中的颜色和位置。
gradient.addColorStop(stop,color);
stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在 stop 位置显示的 CSS 颜色值。
线性渐变
渐变可用于填充矩形、圆形、线条、文本等等。
对象作为 strokeStyle 或 fillStyle 属性的值。
context.createLinearGradient(x0,y0,x1,y1);
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
径向渐变
创建放射状/圆形渐变对象。
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
样式
线型
lineCap
设置或返回线条的结束端点样式。
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。
lineJoin
设置或返回两条线相交时，所创建的拐角类型。
bevel 创建斜角。
round 创建圆角。
miter 默认。创建尖角。
lineWidth
设置或返回当前的线条宽度。
当前线条的宽度，以像素计
miterLimit
设置或返回最大斜接长度。
正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
阴影
shadowColor
设置或返回用于阴影的颜色。
shadowBlur
设置或返回用于阴影的模糊级别。
shadowOffsetX
设置或返回阴影与形状的水平距离。
shadowOffsetY
设置或返回阴影与形状的垂直距离。
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
填充图案
context.fillStyle=color|gradient|pattern;
pattern用于填充绘图对象
"repeat" - 在各个方向上都对图像贴图。默认值。
"repeat-x" - 只在 X 方向上贴图。
"repeat-y" - 只在 Y 方向上贴图。
"no-repeat" - 不贴图，只使用它一次。
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
透明度
全局透明度
ctx.globalAlpha = 0.5; // 设置全局透明度为0.5带有透明度的颜色
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 设置填充颜色为半透明的红色
ctx.fillRect(0, 0, 100, 100); // 绘制一个半透明的红色矩形
文字
属性
font
设置或返回文本内容的当前字体属性。
context.font="italic small-caps bold 12px arial";
默认：10px sans-serif
font-style 规定字体样式。可能的值：Normal、italic、oblique
font-variant 规定字体变体。可能的值：Normal、small-caps
font-weight 规定字体的粗细。可能的值：Normal、bold、bolder、lighter、100、200~900
font-size/line-height 规定字号和行高，以像素计。
font-family 规定字体系列。
caption 使用标题控件的字体（比如按钮、下拉列表等）。
icon 使用用于标记图标的字体。
menu 使用用于菜单中的字体（下拉列表和菜单列表）。
message-box 使用用于对话框中的字体。
small-caption 使用用于标记小型控件的字体。
status-bar 使用用于窗口状态栏中的字体。
注：
italic：浏览器会显示一个斜体的字体样式。
oblique：浏览器会显示一个倾斜的字体样式。
textAlign
设置或返回文本内容的当前对齐方式。
context.textAlign="center|end|left|right|start";
默认：start
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本在指定的位置开始。
right 文本在指定的位置结束。
textBaseline
设置或返回在绘制文本时使用的当前文本基线。
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是 em 方框的顶端。
hanging 文本基线是悬挂基线。
middle 文本基线是 em 方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是 em 方框的底端。
填充
在画布上写文本
context.fillText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。
轮廓
画布上写文本轮廓
context.strokeText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。
测量
画布上输出文本之前，检查字体的宽度
context.measureText(text).width;
text 要测量的文本。
图像
引入图像
在画布上定位图像
context.drawImage(img,x,y);
var img=new Image();
img.src = 'img1.png';
img.onload = function(){
ctx.drawImage(img,10,10);
}
图像大小
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
img.onload = function(){
ctx.drawImage(img,10,10,100,100);
}
图像切片
剪切图像，并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img.onload = function(){
ctx.drawImage(img,10,10,100,100,0,0,100,100);
}
参数：
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度（伸展或缩小图像）。
height 可选。要使用的图像的高度（伸展或缩小图像）。
扫一扫
1210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
