HTML5 <canvas>
HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。
不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
颜色、样式和阴影
属性 | 描述 |
设置或返回用于填充绘画的颜色、渐变或模式 | |
设置或返回用于笔触的颜色、渐变或模式 | |
设置或返回用于阴影的颜色 | |
设置或返回用于阴影的模糊级别 | |
设置或返回阴影距形状的水平距离 | |
设置或返回阴影距形状的垂直距离 |
方法 | 描述 |
创建线性渐变(用在画布内容上) | |
在指定的方向上重复指定的元素 | |
创建放射状/环形的渐变(用在画布内容上) | |
规定渐变对象中的颜色和停止位置 |
线条样式
属性 | 描述 |
设置或返回线条的结束端点样式 | |
设置或返回两条线相交时,所创建的拐角类型 | |
设置或返回当前的线条宽度 | |
设置或返回最大斜接长度 |
矩形
方法 | 描述 |
创建矩形 | |
绘制“被填充”的矩形 | |
绘制矩形(无填充) | |
在给定的矩形内清除指定的像素 |
路径
方法 | 描述 |
填充当前绘图(路径) | |
绘制已定义的路径 | |
起始一条路径,或重置当前路径 | |
把路径移动到画布中的指定点,不创建线条 | |
创建从当前点回到起始点的路径 | |
添加一个新点,然后在画布中创建从该点到最后指定点的线条 | |
从原始画布剪切任意形状和尺寸的区域 | |
创建二次贝塞尔曲线 | |
创建三次方贝塞尔曲线 | |
创建弧/曲线(用于创建圆形或部分圆) | |
创建两切线之间的弧/曲线 | |
如果指定的点位于当前路径中,则返回 true,否则返回 false |
转换
方法 | 描述 |
缩放当前绘图至更大或更小 | |
旋转当前绘图 | |
重新映射画布上的 (0,0) 位置 | |
替换绘图的当前转换矩阵 | |
将当前转换重置为单位矩阵。然后运行 transform() |
文本
属性 | 描述 |
设置或返回文本内容的当前字体属性 | |
设置或返回文本内容的当前对齐方式 | |
设置或返回在绘制文本时使用的当前文本基线 |
方法 | 描述 |
在画布上绘制“被填充的”文本 | |
在画布上绘制文本(无填充) | |
返回包含指定文本宽度的对象 |
图像绘制
方法 | 描述 |
向画布上绘制图像、画布或视频 |
像素操作
属性 | 描述 |
返回 ImageData 对象的宽度 | |
返回 ImageData 对象的高度 | |
返回一个对象,其包含指定的 ImageData 对象的图像数据 |
方法 | 描述 |
创建新的、空白的 ImageData 对象 | |
返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据 | |
把图像数据(从指定的 ImageData 对象)放回画布上 |
合成
属性 | 描述 |
设置或返回绘图的当前 alpha 或透明值 | |
设置或返回新图像如何绘制到已有的图像上 |
其他
方法 | 描述 |
save() | 保存当前环境的状态 |
restore() | 返回之前保存过的路径状态和属性 |
createEvent() |
|
getContext() |
|
toDataURL() |
|
HTML 5 canvas fillStyle 属性
实例
定义用蓝色填充的矩形:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillStyle 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
默认值: | #000000 |
JavaScript 语法: | context.fillStyle=color|gradient|pattern; |
属性值
值 | 描述 |
color | 指示绘图填充色的 CSS 颜色值。默认值是 #000000。 |
gradient | |
pattern | 用于填充绘图的 pattern 对象 |
更多实例
实例 1
定义从上到下的渐变,作为矩形的填充样式:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
实例 2
定义从左到右的渐变,作为矩形的填充样式:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
实例 3
定义从黑到红到白的的渐变,作为矩形的填充样式:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
实例 4
用到的图像:
使用图像来填充绘图:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);ctx.fillStyle=pat;
ctx.fill();
HTML 5 canvas strokeStyle 属性
实例
绘制一个矩形。请用蓝色的笔触颜色:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 strokeStyle 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
默认值: | #000000 |
JavaScript 语法: | context.strokeStyle=color|gradient|pattern; |
属性值
值 | 描述 |
color | 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。 |
gradient | |
pattern | 用于创建 pattern 笔触的 pattern 对象 |
更多实例
实例 1
绘制一个矩形。使用渐变笔触:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
实例 2
用一个渐变笔触来写文本 "w3school.com.cn":
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
HTML 5 canvas shadowColor 属性
实例
绘制一个带有黑色阴影的蓝色矩形:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 shadowColor 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
shadowColor 属性设置或返回用于阴影的颜色。
注释:请将 shadowColor 属性与 shadowBlur 属性一起使用,来创建阴影。
提示:请通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。
默认值: | #000000 |
JavaScript 语法: | context.shadowColor=color; |
属性值
值 | 描述 |
color | 用于阴影的 CSS 颜色值。默认值是 #000000。 |
HTML 5 canvas shadowBlur 属性
实例
绘制一个带有黑色阴影的蓝色矩形,模糊级数是 20:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 shadowBlur 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
shadowBlur 属性设置或返回阴影的模糊级数。
默认值: | #000000 |
JavaScript 语法: | context.shadowBlur=number; |
属性值
值 | 描述 |
number | 阴影的模糊级数 |
HTML 5 canvas shadowOffsetX 属性
实例
绘制一个矩形,带有向右偏移 20 像素的阴影(从矩形的 left 位置):
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 shadowOffsetX 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
shadowOffsetX 属性设置或返回形状与阴影的水平距离。
shadowOffsetX=0 指示阴影位于形状的正下方。
shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。
shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。
提示:如需调整距离形状的垂直位置,请使用 shadowOffsetY 属性。
默认值: | 0 |
JavaScript 语法: | context.shadowOffsetX=number; |
属性值
值 | 描述 |
number | 正值或负值,定义阴影与形状的水平距离。 |
HTML 5 canvas shadowOffsetY 属性
实例
绘制一个矩形,带有向下偏移 20 像素的阴影(从矩形的 top 位置):
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 shadowOffsetY 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
shadowOffsetY 属性设置或返回形状与阴影的垂直距离。
shadowOffsetY=0 指示阴影位于形状的正下方。
shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。
shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。
提示:如需调整距离形状的水平位置,请使用 shadowOffsetX 属性。
默认值: | 0 |
JavaScript 语法: | context.shadowOffsetY=number; |
属性值
值 | 描述 |
number | 正值或负值,定义阴影与形状的垂直距离。 |
HTML5 canvas createLinearGradient() 方法
实例
定义从黑到白的渐变(从左向右),作为矩形的填充样式:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
createLinearGradient() 方法创建线性的渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示:请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
提示:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。
JavaScript 语法:
context.createLinearGradient(x0,y0,x1,y1);
参数值
参数 | 描述 |
x0 | 渐变开始点的 x 坐标 |
y0 | 渐变开始点的 y 坐标 |
x1 | 渐变结束点的 x 坐标 |
y1 | 渐变结束点的 y 坐标 |
更多实例
实例 1
定义一个渐变(从上到下)作为矩形的填充样式:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
实例 2
定义一个从黑到红再到白的渐变,作为矩形的填充样式:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
HTML5 canvas createPattern() 方法
实例
用到的图像:
在水平和垂直方向重复图像:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createPattern() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
createPattern() 方法在指定的方向内重复指定的元素。
元素可以是图片、视频,或者其他 <canvas> 元素。
被重复的元素可用于绘制/填充矩形、圆形或线条等等。
JavaScript 语法:
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
参数值
参数 | 描述 |
image | 规定要使用的图片、画布或视频元素。 |
repeat | 默认。该模式在水平和垂直方向重复。 |
repeat-x | 该模式只在水平方向重复。 |
repeat-y | 该模式只在垂直方向重复。 |
no-repeat | 该模式只显示一次(不重复)。 |
HTML5 canvas createRadialGradient() 方法
实例
绘制一个矩形,并用放射状/圆形渐变进行填充:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createRadialGradient() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
createLinearGradient() 方法创建放射状/圆形渐变对象。
渐变可用于填充矩形、圆形、线条、文本等等。
提示:请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
提示:请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。
JavaScript 语法:
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数值
参数 | 描述 |
x0 | 渐变的开始圆的 x 坐标 |
y0 | 渐变的开始圆的 y 坐标 |
r0 | 开始圆的半径 |
x1 | 渐变的结束圆的 x 坐标 |
y1 | 渐变的结束圆的 y 坐标 |
r1 | 结束圆的半径 |
HTML5 canvas addColorStop() 方法
实例
定义一个从黑到白的渐变,作为矩形的填充样式:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);grd.addColorStop(0,"black");grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 addColorStop() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
addColorStop() 方法规定 gradient 对象中的颜色和位置。
addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。
注释:您可以多次调用 addColorStop() 方法来改变渐变。如果您不对 gradient 对象使用该方法,那么渐变将不可见。为了获得可见的渐变,您需要创建至少一个色标。
JavaScript 语法:
gradient.addColorStop(stop,color);
参数值
参数 | 描述 |
stop | 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。 |
color | 在结束位置显示的 CSS 颜色值 |
更多实例
通过多个 addColorStop() 方法来定义渐变:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
HTML 5 canvas lineCap 属性
实例
绘制圆形的结束线帽:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 lineCap 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
lineCap 属性设置或返回线条末端线帽的样式。
注释:"round" 和 "square" 会使线条略微变长。
默认值: | butt |
JavaScript 语法: | context.lineCap="butt|round|square"; |
属性值
值 | 描述 |
butt | 默认。向线条的每个末端添加平直的边缘。 |
round | 向线条的每个末端添加圆形线帽。 |
square | 向线条的每个末端添加正方形线帽。 |
HTML 5 canvas lineJoin 属性
实例
当两条线条交汇时,创建圆形边角:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 lineJoin 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
lineJoin 属性设置或返回所创建边角的类型,当两条线交汇时。
注释:值 "miter" 受 miterLimit 属性的影响。
默认值: | miter |
JavaScript 语法: | context.lineJoin="bevel|round|miter"; |
属性值
值 | 描述 |
bevel | 创建斜角。 |
round | 创建圆角。 |
miter | 默认。创建尖角。 |
HTML 5 canvas lineWidth 属性
实例
用宽度为 10 像素的线条来绘制矩形:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 lineWidth 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
lineWidth 属性设置或返回当前线条的宽度,以像素计。
默认值: | 1 |
JavaScript 语法: | context.lineWidth=number; |
属性值
值 | 描述 |
number | 当前线条的宽度,以像素计。 |
HTML5 canvas clearRect() 方法
实例
在给定矩形内清空一个矩形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);ctx.clearRect(20,20,100,50);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 clearRect() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
clearRect() 方法清空给定矩形内的指定像素。
JavaScript 语法:
context.clearRect(x,y,width,height);
参数值
参数 | 描述 |
x | 要清除的矩形左上角的 x 坐标 |
y | 要清除的矩形左上角的 y 坐标 |
width | 要清除的矩形的宽度,以像素计 |
height | 要清除的矩形的高度,以像素计 |
HTML5 canvas rect() 方法
实例
绘制 150*100 像素的矩形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.rect(20,20,150,100);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 rect() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
rect() 方法创建矩形。
提示:请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
JavaScript 语法:
context.rect(x,y,width,height);
参数值
参数 | 描述 |
x | 矩形左上角的 x 坐标 |
y | 矩形左上角的 y 坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
更多实例
通过 rect() 方法来创建三个矩形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";ctx.rect(5,5,290,140);
ctx.stroke();
// 绿色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";ctx.rect(30,30,50,50);
ctx.stroke();
// 蓝色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";ctx.rect(50,50,150,80);
ctx.stroke();
HTML5 canvas fillRect() 方法
实例
绘制 150*100 像素的已填充矩形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.fillRect(20,20,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillRect() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
提示:请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
JavaScript 语法:
context.fillRect(x,y,width,height);
参数值
参数 | 描述 |
x | 矩形左上角的 x 坐标 |
y | 矩形左上角的 y 坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
HTML5 canvas strokeRect() 方法
实例
绘制 150*100 像素的矩形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 strokeRect() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
strokeRect() 方法绘制矩形(不填色)。笔触的默认颜色是黑色。
提示:请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
JavaScript 语法:
context.strokeRect(x,y,width,height);
参数值
参数 | 描述 |
x | 矩形左上角的 x 坐标 |
y | 矩形左上角的 y 坐标 |
width | 矩形的宽度,以像素计 |
height | 矩形的高度,以像素计 |
HTML5 canvas clearRect() 方法
实例
在给定矩形内清空一个矩形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);ctx.clearRect(20,20,100,50);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 clearRect() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
clearRect() 方法清空给定矩形内的指定像素。
JavaScript 语法:
context.clearRect(x,y,width,height);
参数值
参数 | 描述 |
x | 要清除的矩形左上角的 x 坐标 |
y | 要清除的矩形左上角的 y 坐标 |
width | 要清除的矩形的宽度,以像素计 |
height | 要清除的矩形的高度,以像素计 |
HTML5 canvas fill() 方法
实例
绘制 150*100 像素的矩形,然后用绿色来给它填色:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.fillStyle="green";ctx.fill();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fill() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
fill() 方法填充当前的图像(路径)。默认颜色是黑色。
提示:请使用 fillStyle 属性来填充另一种颜色/渐变。
注释:如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。
JavaScript 语法:
context.fill();
HTML5 canvas stroke() 方法
实例
绘制一条路径,形状是绿色的字母 L:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="green";ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 stroke() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
提示:请使用 strokeStyle 属性来绘制另一种颜色/渐变。
JavaScript 语法:
context.stroke();
HTML5 canvas beginPath() 方法
实例
在画布上绘制两条路径;红色和蓝色:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制
ctx.beginPath();
ctx.strokeStyle="blue"; // 蓝色路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 进行绘制
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 beginPath() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
beginPath() 方法开始一条路径,或重置当前的路径。
提示:请使用这些方法来创建路径:moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
提示:请使用 stroke() 方法在画布上绘制确切的路径。
JavaScript 语法:
context.fillRect(x,y,width,height);
HTML5 canvas moveTo() 方法
实例
开始一条路径,移动到位置 0,0。创建到达位置 300,150 的一条线:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 moveTo() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
提示:请使用 stroke() 方法在画布上绘制确切的路径。
JavaScript 语法:
context.moveTo(x,y);
参数值
参数 | 描述 |
x | 路径的目标位置的 x 坐标 |
y | 路径的目标位置的 y 坐标 |
HTML5 canvas closePath() 方法
实例
绘制一条路径,形式是字母 L,然后绘制线条以返回开始点:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);ctx.closePath();
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 closePath() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
closePath() 方法创建从当前点到开始点的路径。
提示:请使用 stroke() 方法在画布上绘制确切的路径。
提示:请使用 fill() 方法来填充图像(默认是黑色)。请使用 fillStyle 属性来填充另一个颜色/渐变。
JavaScript 语法:
context.closePath();
更多实例
把绿色作为填充颜色:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();
HTML5 canvas lineTo() 方法
实例
开始一条路径,移动到位置 0,0。创建到达位置 300,150 的一条线:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);ctx.lineTo(300,150);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 lineTo() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
lineTo() 方法添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)。
提示:请使用 stroke() 方法在画布上绘制确切的路径。
JavaScript 语法:
context.lineTo(x,y);
参数值
参数 | 描述 |
x | 路径的目标位置的 x 坐标 |
y | 路径的目标位置的 y 坐标 |
更多实例
绘制一条路径,形状是字母 L:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);ctx.lineTo(20,100);ctx.lineTo(70,100);
ctx.stroke();
HTML5 canvas clip() 方法
实例
从画布中剪切 200*120 像素的矩形区域。然后,绘制绿色矩形。只有被剪切区域内的绿色矩形部分是可见的:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 clip() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
clip() 方法从原始画布中剪切任意形状和尺寸。
提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复(通过 restore() 方法)。
JavaScript 语法:
context.clip();
HTML5 canvas quadraticCurveTo() 方法
实例
绘制一条二次贝塞尔曲线:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 quadraticCurveTo() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
提示:二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
· 开始点:moveTo(20,20)
· 控制点:quadraticCurveTo(20,100,200,20)
· 结束点:quadraticCurveTo(20,100,200,20)
提示:请查看 bezierCurveTo() 方法。它有两个控制点,而不是一个。
JavaScript 语法:
context.quadraticCurveTo(cpx,cpy,x,y);
参数值
参数 | 描述 |
cpx | 贝塞尔控制点的 x 坐标 |
cpy | 贝塞尔控制点的 y 坐标 |
x | 结束点的 x 坐标 |
y | 结束点的 y 坐标 |
HTML5 canvas bezierCurveTo() 方法
实例
绘制一条三次贝塞尔曲线:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 bezierCurveTo() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。
提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 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)
提示:请查看 quadraticCurveTo() 方法。它有一个控制点,而不是两个。
JavaScript 语法:
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
参数值
参数 | 描述 |
cp1x | 第一个贝塞尔控制点的 x 坐标 |
cp1y | 第一个贝塞尔控制点的 y 坐标 |
cp2x | 第二个贝塞尔控制点的 x 坐标 |
cp2y | 第二个贝塞尔控制点的 y 坐标 |
x | 结束点的 x 坐标 |
y | 结束点的 y 坐标 |
HTML5 canvas arc() 方法
实例
创建一个圆形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
· 中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
· 起始角:arc(100,75,50,0,1.5*Math.PI)
· 结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript 语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数值
参数 | 描述 |
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
sAngle | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 |
eAngle | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
HTML5 canvas arcTo() 方法
实例
在画布上创建介于两个切线之间的弧:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20); // 创建开始点
ctx.lineTo(100,20); // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120); // 创建垂直线
ctx.stroke(); // 进行绘制
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arcTo() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。
提示:请使用 stroke() 方法在画布上绘制确切的弧。
JavaScript 语法:
context.fillRect(x1,y1,x2,y2,r);
参数值
参数 | 描述 |
x1 | 弧的起点的 x 坐标 |
y1 | 弧的起点的 y 坐标 |
x2 | 弧的终点的 x 坐标 |
y2 | 弧的终点的 y 坐标 |
r | 弧的半径 |
HTML5 canvas isPointInPath() 方法
实例
绘制一个矩形,如果点 20,50 位于当前路径中:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
{
ctx.stroke();
};
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 isPointInPath() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
isPointInPath() 方法返回 true,如果指定的点位于当前路径中;否则返回 false。
JavaScript 语法:
context.isPointInPath(x,y);
参数值
参数 | 描述 |
x | 测试的 x 坐标 |
y | 测试的 y 坐标 |
HTML5 canvas scale() 方法
实例
绘制矩形,放大到 200%,然后再次绘制矩形:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 scale() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
scale() 方法缩放当前绘图,更大或更小。
注释:如果您对绘图进行缩放,所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。
JavaScript 语法:
context.scale(scalewidth,scaleheight);
参数值
参数 | 描述 |
scalewidth | 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) |
scaleheight | 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) |
更多实例
绘制一个矩形;放大到 200%,再次绘制矩形;放大到 200%,然后再次绘制矩形;放大到 200%,再次绘制矩形:
Your browser does not support the HTML canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
HTML5 canvas rotate() 方法
实例
将矩形旋转 20 度:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 rotate() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
rotate() 方法旋转当前的绘图。
JavaScript 语法:
context.rotate(angle);
参数值
参数 | 描述 |
angle | 旋转角度,以弧度计。 如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。 举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180。 |
HTML5 canvas translate() 方法
实例
在位置 (10,10) 处绘制一个矩形,将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形(请注意现在矩形从位置 (80,80) 开始绘制):
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 translate() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
translate() 方法重新映射画布上的 (0,0) 位置。
注释:当您在 translate() 之后调用诸如 fillRect() 之类的方法时,值会添加到 x 和 y 坐标值上。
JavaScript 语法:
context.translate(x,y);
参数值
参数 | 描述 |
x | 添加到水平坐标(x)上的值 |
y | 添加到垂直坐标(y)上的值 |
HTML5 canvas transform() 方法
实例
绘制一个矩形;通过 transform() 添加一个新的变换矩阵,再次绘制矩形;添加一个新的变换矩阵,然后再次绘制矩形。请注意,每当您调用 transform() 时,它都会在前一个变换矩阵上构建:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 transform() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
画布上的每个对象都拥有一个当前的变换矩阵。
transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵:
a c e
b d f
0 0 1
换句话说,transform() 允许您缩放、旋转、移动并倾斜当前的环境。
注释:该变换只会影响 transform() 方法调用之后的绘图。
注释:transform() 方法的行为相对于由 rotate(), scale(), translate(), or transform() 完成的其他变换。例如:如果您已经将绘图设置为放到两倍,则 transform() 方法会把绘图放大两倍,您的绘图最终将放大四倍。
提示:请查看 setTransform() 方法,它不会相对于其他变换来发生行为。
JavaScript 语法:
context.transform(a,b,c,d,e,f);
参数值
参数 | 描述 |
a | 水平缩放绘图 |
b | 水平倾斜绘图 |
c | 垂直倾斜绘图 |
d | 垂直缩放绘图 |
e | 水平移动绘图 |
f | 垂直移动绘图 |
HTML5 canvas setTransform() 方法
实例
绘制一个矩形,通过 setTransform() 重置并创建新的变换矩阵,再次绘制矩形,重置并创建新的变换矩阵,然后再次绘制矩形。请注意,每当您调用 setTransform() 时,它都会重置前一个变换矩阵然后构建新的矩阵,因此在下面的例子中,不会显示红色矩形,因为它在蓝色矩形下面:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 setTransform() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
画布上的每个对象都拥有一个当前的变换矩阵。
setTransform() 方法把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行 transform()。
换句话说,setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。
注释:该变换只会影响 setTransform() 方法调用之后的绘图。
JavaScript 语法:
context.setTransform(a,b,c,d,e,f);
参数值
参数 | 描述 |
a | 水平旋转绘图 |
b | 水平倾斜绘图 |
c | 垂直倾斜绘图 |
d | 垂直缩放绘图 |
e | 水平移动绘图 |
f | 垂直移动绘图 |
HTML 5 canvas font 属性
实例
在画布上写一段 40 像素的文本,使用的字体是 "Arial":
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillStyle 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
font 属性设置或返回画布上文本内容的当前字体属性。
font 属性使用的语法与 CSS font 属性相同。
默认值: | 10px sans-serif |
JavaScript 语法: | context.font="italic small-caps bold 12px arial"; |
属性值
值 | 描述 |
font-style | 规定字体样式。可能的值: · normal · italic · oblique |
font-variant | 规定字体变体。可能的值: · normal · small-caps |
font-weight | 规定字体的粗细。可能的值: · normal · bold · bolder · lighter · 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900 |
font-size / line-height | 规定字号和行高,以像素计。 |
font-family | 规定字体系列。 |
caption | 使用标题控件的字体(比如按钮、下拉列表等)。 |
icon | 使用用于标记图标的字体。 |
menu | 使用用于菜单中的字体(下拉列表和菜单列表)。 |
message-box | 使用用于对话框中的字体。 |
small-caption | 使用用于标记小型控件的字体。 |
status-bar | 使用用于窗口状态栏中的字体。 |
HTML 5 canvas textAlign 属性
实例
在位置 150 创建一条红线。位置 150 是下面例子中定义的所有文本的锚点。请研究每种 textAlign 属性值的效果:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 textAlign 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
textAlign 属性根据锚点,设置或返回文本内容的当前对齐方式。
通常,文本会从指定位置开始,不过,如果您设置为 textAlign="right" 并将文本放置到位置 150,那么会在位置 150 结束。
提示:使用 fillText() 或 strokeText() 方法在实际地在画布上绘制并定位文本。
默认值: | start |
JavaScript 语法: | context.textAlign="center|end|left|right|start"; |
属性值
值 | 描述 |
start | 默认。文本在指定的位置开始。 |
end | 文本在指定的位置结束。 |
center | 文本的中心被放置在指定的位置。 |
left | 文本左对齐。 |
right | 文本右对齐。 |
HTML 5 canvas textBaseline 属性
实例
定义用蓝色填充的矩形:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//在位置 y=100 绘制蓝色线条
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//在 y=200 以不同的 textBaseline 值放置每个单词
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 textBaseline 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
textBaseline 属性设置或返回在绘制文本时的当前文本基线。
下面的图示演示了 textBaseline 属性支持的各种基线:
注释:fillText() 或 strokeText() 方法在画布上定位文本时,将使用指定的 textBaseline 值。
默认值: | alphabetic |
JavaScript 语法: | context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
属性值
值 | 描述 |
alphabetic | 默认。文本基线是普通的字母基线。 |
top | 文本基线是 em 方框的顶端。。 |
hanging | 文本基线是悬挂基线。 |
middle | 文本基线是 em 方框的正中。 |
ideographic | 文本基线是表意基线。 |
bottom | 文本基线是 em 方框的底端。 |
HTML5 canvas fillText() 方法
实例
使用 fillText(),在画布上写文本 "Hello world!" 和 "w3school.com.cn":
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");// 用渐变填色
ctx.fillStyle=gradient;ctx.fillText("w3school.com.cn",10,90);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillText() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
提示:请使用 font 属性来定义字体和字号,并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
JavaScript 语法:
context.fillText(text,x,y,maxWidth);
参数值
参数 | 描述 |
text | 规定在画布上输出的文本。 |
x | 开始绘制文本的 x 坐标位置(相对于画布)。 |
y | 开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth | 可选。允许的最大文本宽度,以像素计。 |
HTML5 canvas strokeText() 方法
实例
使用 strokeText(),在画布上写文本 "Hello world!" 和 "w3school.com.cn":
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";ctx.strokeText("Hello World!",10,50);
ctx.font="30px Verdana";// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");// 用渐变填色
ctx.strokeStyle=gradient;ctx.strokeText("w3school.com.cn",10,90);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 strokeText() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
strokeText() 方法在画布上绘制文本(没有填色)。文本的默认颜色是黑色。
提示:请使用 font 属性来定义字体和字号,并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
JavaScript 语法:
context.strokeText(text,x,y,maxWidth);
参数值
参数 | 描述 |
text | 规定在画布上输出的文本。 |
x | 开始绘制文本的 x 坐标位置(相对于画布)。 |
y | 开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth | 可选。允许的最大文本宽度,以像素计。 |
HTML5 canvas measureText() 方法
实例
在画布上输出文本之前,检查字体的宽度:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 measureText() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
measureText() 方法返回包含一个对象,该对象包含以像素计的指定字体宽度。
提示:如果您需要在文本向画布输出之前,就了解文本的宽度,那么请使用该方法。
JavaScript 语法:
context.measureText(text).width;
参数值
参数 | 描述 |
text | 要测量的文本。 |
HTML5 canvas drawImage() 方法
实例
要使用的图片:
向画布上面绘制图片:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");ctx.drawImage(img,10,10);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。
JavaScript 语法 1
在画布上定位图像:
context.drawImage(img,x,y);
JavaScript 语法 2
在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值
参数 | 描述 |
img | 规定要使用的图像、画布或视频。 |
sx | 可选。开始剪切的 x 坐标位置。 |
sy | 可选。开始剪切的 y 坐标位置。 |
swidth | 可选。被剪切图像的宽度。 |
sheight | 可选。被剪切图像的高度。 |
x | 在画布上放置图像的 x 坐标位置。 |
y | 在画布上放置图像的 y 坐标位置。 |
width | 可选。要使用的图像的宽度。(伸展或缩小图像) |
height | 可选。要使用的图像的高度。(伸展或缩小图像) |
更多实例
例子 1
在画布上对图像进行定位,然后规定图像的宽度和高度:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");ctx.drawImage(img,10,10,240,160);
例子 2
剪切图片,并在画布上对被剪切的部分进行定位:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");ctx.drawImage(img,90,130,90,80,20,20,90,80);
例子 3
要使用的视频(请按下播放键以开始演示):
画布:
Your browser does not support the HTML5 canvas tag.
JavaScript (每 20 毫秒,代码就会绘制视频的当前帧):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
HTML 5 canvas width 属性
实例
输出 ImageData 对象的宽度:
alert("Width of imgData is: " + imgData.width);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 width 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
width 属性返回 ImageData 对象的宽度,以像素计。
提示:请参阅 createImageData()、getImageData() 以及 putImageData() 方法,以获得更多关于 ImageData 对象的知识。
默认值: | #000000 |
JavaScript 语法: | imgData.width; |
HTML 5 canvas height 属性
实例
输出 ImageData 对象的高度:
alert("Width of imgData is: " + imgData.height);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 height 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
height 属性返回 ImageData 对象的高度,以像素计。
提示:请参阅 createImageData()、getImageData() 以及 putImageData() 方法,以获得更多关于 ImageData 对象的知识。
默认值: | #000000 |
JavaScript 语法: | imgData.height; |
HTML 5 canvas data 属性
实例
创建 100*100 像素的 ImageData 对象,其中每个像素均被设置为红色::
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 data 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
data 属性返回一个对象,该对象包含指定的 ImageData 对象的图像数据。
对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:
· R - 红色 (0-255)
· G - 绿色 (0-255)
· B - 蓝色 (0-255)
· A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
color/alpha 以数组形式存在,并存储于 ImageData 对象的 data 属性中。
例子:
将 ImageData 对象中的第一个像素变为红色的语法:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
将 ImageData 对象中的第二个像素变为绿色的语法:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
提示:请参阅 createImageData()、getImageData() 以及 putImageData() 方法,以获得更多关于 ImageData 对象的知识。
JavaScript 语法:
imageData.data;
HTML5 canvas createImageData() 方法
实例
创建 100*100 像素的 ImageData 对象,其中每个像素都是红色的,然后把它放到画布上:
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,10);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createImageData() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。
对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:
· R - 红色 (0-255)
· G - 绿色 (0-255)
· B - 蓝色 (0-255)
· A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
因此 ,transparent black 表示 (0,0,0,0)。
color/alpha 以数组形式存在,并且既然数组包含了每个像素的四条信息,数组的大小是 ImageData 对象的四倍。(获得数组大小有更简单的办法,就是使用 ImageDataObject.data.length)
包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。
提示:在操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上。
例子:
该语法把 ImageData 对象中的第一个像素变为红色:
imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;
该语法把 ImageData 对象中的第二个像素变为红色:
imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;
JavaScript 语法
有两个版本的 createImageData() 方法:
1. 以指定的尺寸(以像素计)创建新的 ImageData 对象:
var imgData=context.createImageData(width,height);
2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象(不会复制图像数据):
var imgData=context.createImageData(imageData);
参数值
参数 | 描述 |
width | ImageData 对象的宽度,以像素计。 |
height | ImageData 对象的高度,以像素计。 |
imageData | 另一个 ImageData 对象。 |
HTML5 canvas getImageData() 方法
实例
下面的代码通过 getImageData() 复制画布上指定矩形的像素数据,然后通过 putImageData() 将图像数据放回画布:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 getImageData() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:
· R - 红色 (0-255)
· G - 绿色 (0-255)
· B - 蓝色 (0-255)
· A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
color/alpha 以数组形式存在,并存储于 ImageData 对象的 data 属性中。
提示:在操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上。
例子:
以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息:
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
提示:您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。
使用该公式遍历所有的像素,并改变其颜色值:
red=255-old_red;
green=255-old_green;
blue=255-old_blue;
(请见下面的“亲自试一试”实例。)
JavaScript 语法
var imgData=context.getImageData(x,y,width,height);
参数值
参数 | 描述 |
x | 开始复制的左上角位置的 x 坐标。 |
y | 开始复制的左上角位置的 y 坐标。 |
width | 将要复制的矩形区域的宽度。 |
height | 将要复制的矩形区域的高度。 |
更多实例
要使用的图像:
使用 getImageData() 来反转画布上的图像的每个像素的颜色。
Your browser does not support the HTML5 canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);// 反转颜色
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);
HTML5 canvas putImageData() 方法
实例
下面的代码通过 getImageData() 复制画布上指定矩形的像素数据,然后通过 putImageData() 将图像数据放回画布:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);ctx.putImageData(imgData,10,70);
}
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 putImageData() 方法。
注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
putImageData() 方法将图像数据(从指定的 ImageData 对象)放回画布上。
提示:请参阅 getImageData() 方法,它可复制画布上指定的矩形的像素数据。
提示:请参阅 createImageData() 方法,它可创建新的空白 ImageData 对象。
JavaScript 语法:
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
参数值
参数 | 描述 |
imgData | 规定要放回画布的 ImageData 对象。 |
x | ImageData 对象左上角的 x 坐标,以像素计。 |
y | ImageData 对象左上角的 y 坐标,以像素计。 |
dirtyX | 可选。水平值(x),以像素计,在画布上放置图像的位置。 |
dirtyY | 可选。水平值(y),以像素计,在画布上放置图像的位置。 |
dirtyWidth | 可选。在画布上绘制图像所使用的宽度。 |
dirtyHeight | 可选。在画布上绘制图像所使用的高度。 |
HTML 5 canvas globalAlpha 属性
实例
首先,绘制一个红色的矩形,然后将透明度 (globalAlpha) 设置为 0.2,然后再绘制一个绿色和一个蓝色的矩形:
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);// 调节透明度ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 globalAlpha 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
globalAlpha 属性设置或返回绘图的当前透明值(alpha 或 transparency)。
globalAlpha 属性值必须是介于 0.0(完全透明) 与 1.0(不透明) 之间的数字。
默认值: | 1.0 |
JavaScript 语法: | context.globalAlpha=number; |
属性值
值 | 描述 |
number | 透明值。必须介于 0.0(完全透明) 与 1.0(不透明) 之间。 |
HTML 5 canvas globalCompositeOperation 属性
实例
使用不同的 globalCompositeOperation 值绘制矩形。红色矩形是目标图像。蓝色矩形是源图像:
source-over destination-over
Your browser does not support the canvas tag.
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 globalCompositeOperation 属性。
注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定义和用法
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
默认值: | source-over |
JavaScript 语法: | context.globalCompositeOperation="source-in"; |
属性值
值 | 描述 |
source-over | 默认。在目标图像上显示源图像。 |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。 |
source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。 |
destination-over | 在源图像上方显示目标图像。 |
destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。 |
destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。 |
lighter | 显示源图像 + 目标图像。 |
copy | 显示源图像。忽略目标图像。 |
xor | 使用异或操作对源图像与目标图像进行组合。 |
更多实例
所有 globalCompositeOperation 属性值: