HTML5 <canvas>

来源：互联网发布：reverse软件下载编辑：程序博客网时间：2024/06/06 03:28

HTML5 <canvas>

HTML5 <canvas>标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器） -您必须使用脚本来完成实际的绘图任务。

getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d")对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome以及 Safari支持 <canvas>及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 <canvas>元素。

颜色、样式和阴影

属性

描述

fillStyle

设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle

设置或返回用于笔触的颜色、渐变或模式

shadowColor

设置或返回用于阴影的颜色

shadowBlur

设置或返回用于阴影的模糊级别

shadowOffsetX

设置或返回阴影距形状的水平距离

shadowOffsetY

设置或返回阴影距形状的垂直距离

方法

描述

createLinearGradient()

创建线性渐变（用在画布内容上）

createPattern()

在指定的方向上重复指定的元素

createRadialGradient()

创建放射状/环形的渐变（用在画布内容上）

addColorStop()

规定渐变对象中的颜色和停止位置

线条样式

属性

描述

lineCap

设置或返回线条的结束端点样式

lineJoin

设置或返回两条线相交时，所创建的拐角类型

lineWidth

设置或返回当前的线条宽度

miterLimit

设置或返回最大斜接长度

矩形

方法

描述

rect()

创建矩形

fillRect()

绘制“被填充”的矩形

strokeRect()

绘制矩形（无填充）

clearRect()

在给定的矩形内清除指定的像素

路径

方法

描述

fill()

填充当前绘图（路径）

stroke()

绘制已定义的路径

beginPath()

起始一条路径，或重置当前路径

moveTo()

把路径移动到画布中的指定点，不创建线条

closePath()

创建从当前点回到起始点的路径

lineTo()

添加一个新点，然后在画布中创建从该点到最后指定点的线条

clip()

从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo()

创建二次贝塞尔曲线

bezierCurveTo()

创建三次方贝塞尔曲线

arc()

创建弧/曲线（用于创建圆形或部分圆）

arcTo()

创建两切线之间的弧/曲线

isPointInPath()

如果指定的点位于当前路径中，则返回true，否则返回 false

转换

方法

描述

scale()

缩放当前绘图至更大或更小

rotate()

旋转当前绘图

translate()

重新映射画布上的(0,0) 位置

transform()

替换绘图的当前转换矩阵

setTransform()

将当前转换重置为单位矩阵。然后运行transform()

文本

属性

描述

font

设置或返回文本内容的当前字体属性

textAlign

设置或返回文本内容的当前对齐方式

textBaseline

设置或返回在绘制文本时使用的当前文本基线

方法

描述

fillText()

在画布上绘制“被填充的”文本

strokeText()

在画布上绘制文本（无填充）

measureText()

返回包含指定文本宽度的对象

图像绘制

方法

描述

drawImage()

向画布上绘制图像、画布或视频

像素操作

属性

描述

width

返回ImageData 对象的宽度

height

返回ImageData 对象的高度

data

返回一个对象，其包含指定的ImageData 对象的图像数据

方法

描述

createImageData()

创建新的、空白的ImageData 对象

getImageData()

返回ImageData 对象，该对象为画布上指定的矩形复制像素数据

putImageData()

把图像数据（从指定的ImageData 对象）放回画布上

合成

属性

描述

globalAlpha

设置或返回绘图的当前alpha 或透明值

globalCompositeOperation

设置或返回新图像如何绘制到已有的图像上

其他

方法

描述

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 对象

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 对象

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 属性。

默认值：

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 属性。

默认值：

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);

参数值

参数

描述

渐变开始点的x 坐标

渐变开始点的y 坐标

渐变结束点的x 坐标

渐变结束点的y 坐标

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);

参数值

参数

描述

渐变的开始圆的x 坐标

渐变的开始圆的y 坐标

开始圆的半径

渐变的结束圆的x 坐标

渐变的结束圆的y 坐标

结束圆的半径

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 颜色值

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属性设置或返回当前线条的宽度，以像素计。

默认值：

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 坐标

要清除的矩形左上角的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 坐标

矩形左上角的y 坐标

width

矩形的宽度，以像素计

height

矩形的高度，以像素计

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 坐标

矩形左上角的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 坐标

矩形左上角的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 坐标

要清除的矩形左上角的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 坐标

路径的目标位置的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();

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 坐标

路径的目标位置的y 坐标

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 坐标

结束点的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 坐标

结束点的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 坐标。

圆的中心的y 坐标。

圆的半径。

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.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);

参数值

参数

描述

弧的起点的x 坐标

弧的起点的y 坐标

弧的终点的x 坐标

弧的终点的y 坐标

弧的半径

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 坐标

测试的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.)

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）上的值

添加到垂直坐标（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);

参数值

参数

描述

水平缩放绘图

水平倾斜绘图

垂直倾斜绘图

垂直缩放绘图

水平移动绘图

垂直移动绘图

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);

参数值

参数

描述

水平旋转绘图

水平倾斜绘图

垂直倾斜绘图

垂直缩放绘图

水平移动绘图

垂直移动绘图

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

使用用于标记图标的字体。

使用用于菜单中的字体（下拉列表和菜单列表）。

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语法：

属性值

值

描述

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 坐标位置（相对于画布）。

开始绘制文本的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 坐标位置（相对于画布）。

开始绘制文本的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

规定要使用的图像、画布或视频。

可选。开始剪切的x 坐标位置。

可选。开始剪切的y 坐标位置。

swidth

可选。被剪切图像的宽度。

sheight

可选。被剪切图像的高度。

在画布上放置图像的x 坐标位置。

在画布上放置图像的y 坐标位置。

width

可选。要使用的图像的宽度。（伸展或缩小图像）

height

可选。要使用的图像的高度。（伸展或缩小图像）

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 属性

HTML5 Canvas 参考手册

实例

输出 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()

{

varimgData=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 坐标。

开始复制的左上角位置的y 坐标。

width

将要复制的矩形区域的宽度。

height

将要复制的矩形区域的高度。

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 对象。

ImageData对象左上角的 x 坐标，以像素计。

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

使用异或操作对源图像与目标图像进行组合。

HTML5 <canvas>

浏览器支持

颜色、样式和阴影

线条样式

矩形

路径

转换

文本

图像绘制

像素操作

合成

其他

HTML 5 canvas fillStyle 属性

实例

浏览器支持

定义和用法

属性值

更多实例

实例 1

实例 2

实例 3

实例 4

HTML 5 canvas strokeStyle 属性

实例

浏览器支持

定义和用法

属性值

更多实例

实例 1

实例 2

HTML 5 canvas shadowColor 属性

实例

浏览器支持

定义和用法

属性值

HTML 5 canvas shadowBlur 属性

实例

浏览器支持

定义和用法

属性值

HTML 5 canvas shadowOffsetX 属性

实例

浏览器支持

定义和用法

属性值

HTML 5 canvas shadowOffsetY 属性

实例

浏览器支持

定义和用法

属性值

HTML5 canvas createLinearGradient() 方法

实例

浏览器支持

定义和用法

JavaScript 语法：

参数值

更多实例

实例 1

实例 2

HTML5 canvas createPattern() 方法

实例

浏览器支持

定义和用法

JavaScript 语法：

参数值

HTML5 canvas createRadialGradient() 方法

实例

浏览器支持

定义和用法

JavaScript 语法：

参数值

HTML5 canvas addColorStop() 方法

实例

浏览器支持

定义和用法

JavaScript 语法：

参数值

更多实例

HTML 5 canvas lineCap 属性

实例