HTML <canvas> 元素提供一种使用 JavaScript 绘制图形的简单而强大的方法。它可以用来绘制图表、制作照片构图或制作简单（和不那么简单）的动画。
下面是一个简单的 <canvas> 元素，它只有两个特定的属性 width 和 height 以及所有核心 HTML 属性，如 id、name 和 class 等。
<canvas id="mycanvas" width="100" height="100"></canvas>
您可以使用 getElementById() 方法在 DOM 中轻松找到 <canvas> 元素，如下所示：
var canvas = document.getElementById("mycanvas");
例子
如何在 HTML 文档使用 <canvas> 元素。
<!DOCTYPE html>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>
渲染上下文
<canvas> 最初是空白的，要显示某些内容，脚本首先需要访问渲染上下文。canvas 元素具有一个名为 getContext 的 DOM 方法，该方法用于获取渲染上下文及其绘图函数。此函数采用一个参数，即上下文类型 2d。
实例
以下是获取所需上下文的代码，以及检查浏览器是否支持 <canvas> 元素：
var canvas = document.getElementById("mycanvas");
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 此处为绘图代码
} else {
// 此处的canvas代码不受支持
}
浏览器支持
注意：最新版本的 Firefox、Safari、Chrome 和 Opera 都支持 HTML Canvas，但 IE8 本身不支持 Canvas。
可以使用 ExplorerCanvas 通过 Internet Explorer 获得画布支持。你只需要包含这个 JavaScript ，如下所示 -
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
HTML Canvas - 绘制矩形
有三种方法可以在画布上绘制矩形：
| 方法 | 描述 |
|---|---|
| fillRect(x,y,width,height) | 此方法绘制一个填充的矩形。 |
| strokeRect(x,y,width,height) | 此方法绘制矩形轮廓。 |
| clearRect(x,y,width,height) | 此方法清除指定区域并使其完全透明 |
此处，x 和 y 指定矩形左上角在画布上的位置（相对于原点），宽度和高度是矩形的宽度和高度。
例子
下面利用上面提到的方法来绘制一个漂亮的矩形。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 绘制形状
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 绘图路径
我们需要以下方法在画布上绘制路径：
| 方法 | 描述 |
|---|---|
| beginPath（） | 此方法重置当前路径。 |
| moveTo（x， y） | 此方法使用给定点创建新的子路径。 |
| closePath() | 此方法将当前子路径标记为闭合，并启动新子路径，其点与新闭合子路径的起点和终点相同。 |
| fill () | 此方法使用当前填充样式填充子路径。 |
| stroke() | 此方法使用当前描边样式描边子路径。 |
| arc(x, y, radius, startAngle, endAngle, anticlockwise) | 向子路径添加点，使得由参数描述的圆的周长描述的圆弧（从给定的起始角度开始，到给定的结束角度结束，沿给定方向前进）被添加到路径中，通过直线连接到前一个点。 |
例子
下面是利用上面提到的方法来绘制一个形状。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 绘制形状
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 外圈
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 嘴巴
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 画线
Line 方法
我们需要以下方法在画布上画线：
| 方法 | 描述 |
|---|---|
| beginPath（） | 此方法重置当前路径。 |
| moveTo（x， y） | 此方法使用给定点创建新的子路径。 |
| closePath（） | 此方法将当前子路径标记为闭合，并启动新子路径，其点与新闭合子路径的起点和终点相同。 |
| fill() | 此方法使用当前填充样式填充子路径。 |
| stroke() | 此方法使用当前描边样式描边子路径。 |
| lineTo（x， y） | 此方法将给定点添加到当前子路径中，通过直线连接到前一个子路径。 |
例子
下面利用上述方法绘制一个三角形。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 填充三角形
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// 中位三角形
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 绘制贝塞尔曲线
我们需要以下方法在画布上绘制贝塞尔曲线：
| 方法 | 描述 |
|---|---|
| beginPath（） | 此方法重置当前路径。 |
| moveTo（x， y） | 此方法使用给定点创建新的子路径。 |
| closePath（） | 此方法将当前子路径标记为闭合，并启动新子路径，其点与新闭合子路径的起点和终点相同。 |
| fill() | 此方法使用当前填充样式填充子路径。 |
| stroke() | 此方法使用当前描边样式描边子路径。 |
| bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) | 此方法将给定点添加到当前路径中，通过具有给定控制点的立方贝塞尔曲线连接到前一个路径。 |
bezierCurveTo（） 方法中的 x 和 y 参数是终点的坐标。CP1x 和 CP1Y 为第一控制点的坐标，CP2X 和 CP2Y 为第二控制点的坐标。
例子
下面利用上面提到的方法来绘制贝塞尔曲线。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 绘制二次曲线
我们需要以下方法在画布上绘制二次曲线：
| 方法 | 描述 |
|---|---|
| beginPath() | 此方法重置当前路径。 |
| moveTo(x,y) | 此方法使用给定点创建新的子路径。 |
| closePath() | 此方法将当前子路径标记为闭合，并启动新子路径，其点与新闭合子路径的起点和终点相同。 |
| fill() | 此方法使用当前填充样式填充子路径。 |
| stroke() | 此方法使用当前描边样式描边子路径。 |
| quadraticCurveTo(cpx, cpy, x, y) | 此方法将给定点添加到当前路径中，通过具有给定控制点的二次贝塞尔曲线连接到前一个路径。 |
quadraticCurveTo() 方法中的 x 和 y 参数是终点的坐标。cpx 和 cpy 是控制点的坐标。
例子
下面利用上述方法来绘制二次曲线。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 绘制形状
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 使用图像
如何将外部图像导入画布，然后使用以下方法在该图像上绘图：
| 方法 | 描述 |
|---|---|
| beginPath() | 此方法重置当前路径。 |
| moveTo(x,y) | 此方法使用给定点创建新的子路径。 |
| closePath() | 此方法将当前子路径标记为闭合，并启动新子路径，其点与新闭合子路径的起点和终点相同。 |
| fill() | 此方法使用当前填充样式填充子路径。 |
| stroke() | 此方法使用当前描边样式描边子路径。 |
| drawImage(image,dx,dy) | 此方法将给定的图像绘制到画布上。这里的 image 是对图像或画布对象的引用。x 和 y 构成了目标画布上的坐标，我们的图像应该被放置在那里。 |
例子
下面使用上述方法来导入图像。
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function drawShape() {
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext) {
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 绘制形状
var img = new Image();
img.src = '/html/images/backdrop.jpg';
img.onload = function() {
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>
HTML Canvas - 创建渐变
利用以下方法使用线性和径向渐变填充和描边形状：
| 方法 | 描述 |
|---|---|
| addColorStop(offset, color) | 此方法将具有给定颜色的色标添加到给定偏移处的渐变中。这里 0.0 是梯度一端的偏移量，1.0 是另一端的偏移量。 |
| createLinearGradient(x0, y0, x1, y1) | 此方法返回一个 CanvasGradient 对象，该对象表示沿参数表示的坐标给出的线绘制的线性渐变。这四个参数表示梯度的起点 （x1，y1） 和终点 （x2，y2）。 |
| createRadialGradient(x0, y0, r0, x1, y1, r1) | 此方法返回一个 CanvasGradient 对象，该对象表示径向渐变，该径向渐变沿参数表示的圆给出的圆锥体绘制。前三个参数定义一个坐标为 （x1，y1） 和半径 r1 的圆，第二个参数定义一个坐标为 （x2，y2） 和半径 r2 的圆。 |
示例 - 线性梯度
下面利用上述方法来创建线性梯度。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 创建线性渐变
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
// 为填充和笔划样式指定渐变
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// 绘制形状
ctx.fillRect(10,10,130,130);
ctx.strokeRect(50,50,50,50);
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
示例 - 径向梯度
下面利用上述方法来创建径向渐变。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height: 100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape() {
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext) {
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 创建渐变
var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
// 绘制形状
ctx.fillStyle = radgrad4;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = radgrad;
ctx.fillRect(0, 0, 150, 150);
}
else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 样式和颜色
将颜色应用于形状的两个重要属性：
| 方法 | 描述 |
|---|---|
| fillStyle | 此属性表示要在形状中使用的颜色或样式。 |
| strokeStyle | 此属性表示用于形状周围线条的颜色或样式 |
默认情况下，描边和填充颜色设置为黑色，即 CSS 颜色值 #000000 。
示例 - fillStyle
下面利用上面提到 fillStyle 属性来创建一个漂亮的模式。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 创建图案
for (var i=0;i<7;i++){
for (var j=0;j<7;j++){
ctx.fillStyle='rgb(' + Math.floor(255-20.5*i)+ ','+ Math.floor(255 - 42.5*j) + ',255)';
ctx.fillRect( j*25, i* 25, 55, 55 );
}
}
}
else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
示例 - strokeStyle
下面利用上面提到的 fillStyle 属性来创建另一个漂亮的模式。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 创建图案
for (var i=0;i<10;i++){
for (var j=0;j<10;j++){
ctx.strokeStyle='rgb(255,'+ Math.floor(50-2.5*i)+','+ Math.floor(155 - 22.5 * j ) + ')';
ctx.beginPath();
ctx.arc(1.5+j*25, 1.5 + i*25,10,10,Math.PI*5.5, true);
ctx.stroke();
}
}
}
else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 文本和字体
使用不同字体和文本属性创建文本的功能：
| 字体属性 | 描述 |
|---|---|
| font [ = value ] | 返回当前字体设置，可以设置以更改字体。 |
| textAlign [ = value ] | 返回当前文本对齐设置，可以设置此属性以更改对齐方式。可能的值为 start、end、left、right 和 center。 |
| textBaseline [ = value ] | 返回当前基线对齐设置，可以设置此属性以更改基线对齐方式。可能的值为 top、hanging、middle、alphabeticic、ideographic 和 bottom |
| fillText(text, x, y [, maxWidth ] ) | 在给定坐标 x 和 y 指示的给定位置填充给定文本。 |
| strokeText(text, x, y [, maxWidth ] ) | 在给定坐标 x 和 y 指示的给定位置描边给定文本。 |
例子
下面利用上面提到的属性来绘制文本：
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#00F';
ctx.font = 'Italic 30px Sans-Serif';
ctx.textBaseline = 'Top';
ctx.fillText ('Hello world!', 40, 100);
ctx.font = 'Bold 30px Sans-Serif';
ctx.strokeText('Hello world!', 40, 50);
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 图案和阴影
创建图案
在画布上创建图案需要以下方法：
| 方法 | 描述 |
|---|---|
| createPattern(image, repetition) | 将使用 image 创建模式。第二个参数可以是具有以下值之一的字符串：repeat、repeat-x、repeat-y 和 no-repeat。如果指定了空字符串或 null，则重复 will。 |
例子
下面利用上面提到的方法来创建一个漂亮的模式。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 创建新的图像对象用作图案
var img = new Image();
img.src = '/html/images/pattern.jpg';
img.onload = function(){
// 创建图案
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}
}
else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
假设我们有以下模式：
创建阴影
在绘图周围创建漂亮阴影的功能。所有绘图操作都受四个全局阴影属性的影响。
| 属性 | 属性和描述 |
|---|---|
| shadowColor [ = value ] | 返回当前阴影颜色，可以设置此属性以更改阴影颜色。 |
| shadowOffsetX [ = value ] | 返回当前阴影偏移量 X，并且可以设置此属性以更改阴影偏移量 X。 |
| shadowOffsetY [ = value ] | 返回当前阴影偏移量 Y，并且可以设置、更改阴影偏移量 Y。 |
| shadowBlur [ = value ] | 返回应用于阴影的当前模糊级别，可以设置此属性以更改模糊级别。 |
例子
下面利用上述属性来绘制阴影。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("This is shadow test", 5, 30);
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - 保存和恢复状态
保存和恢复画布状态的两种方法，画布绘图状态基本上是已应用的所有样式和转换的快照，由以下内容组成 -
- 转换，如平移、旋转和缩放等。
- 当前剪切区域。
- 以下属性的当前值 - strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline。
每次调用 save 方法时，画布状态都会存储在堆栈上，每次调用 restore 方法时，都会从堆栈中返回上次保存的状态。
| 方法 | 描述 |
|---|---|
| save() | 将当前状态推送到堆栈上。 |
| restore() | 在堆栈上弹出顶部状态，将上下文还原到该状态。 |
例子
下面显示如何调用还原，以恢复原始状态，并再次将最后一个矩形绘制为黑色。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
// 使用默认设置绘制矩形
ctx.fillRect(0,0,150,150);
// 保存默认状态
ctx.save();
// 更改设置
ctx.fillStyle = '#66FFFF'
ctx.fillRect( 15,15,120,120);
// 保存当前状态
ctx.save();
// 对设置进行新的更改
ctx.fillStyle = '#993333'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
// 恢复以前的状态
ctx.restore();
// 使用恢复的设置绘制矩形
ctx.fillRect(45,45,60,60);
// Restore original state
ctx.restore();
// 使用恢复的设置绘制矩形
ctx.fillRect(40,40,90,90);
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas"></canvas>
</body>
</html>
HTML Canvas - translate
translate(x,y) 方法用于将画布及其原点移动到网格中的不同点。
这里的参数 x 是画布向左或向右移动的量，y 是它向上或向下移动的量
例子
下面绘制各种 Spirographs——
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,300,300);
for (i=0;i<3;i++) {
for (j=0;j<3;j++) {
ctx.save();
ctx.strokeStyle = "#FF0066";
ctx.translate(50+j*100,50+i*100);
drawSpirograph(ctx,10*(j+3)/(j+2),-2*(i+3)/(i+1),10);
ctx.restore();
}
}
}
else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
HTML Canvas - 旋转
rotate(angle) 方法用于围绕当前原点旋转画布。
此方法仅采用一个参数，即画布旋转的角度，以弧度为单位的顺时针旋转。
例子
下面运行两个循环，其中第一个循环决定了环的数量，第二个循环决定了每个环中绘制的点数。
<!DOCTYPE html>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
ctx.translate(100,100);
for (i=1; i<7; i++){
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(200-51*i)+',0)';
for (j=0; j < i*6; j++){
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body id="test" onload="drawShape();">
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
HTML Canvas - 缩放
scale(x,y) 方法用于增加或减少 canvas 网格中的单位。这可用于绘制缩小或放大的形状和位图。
此方法采用两个参数，其中 x 是水平方向的比例因子，y 是垂直方向的比例因子。这两个参数都必须是正数。
小于 1.0 的值会减小单位大小，大于 1.0 的值会增加单位大小。将比例因子精确设置为 1.0 不会影响单位大小。
例子
下面绘制九个具有不同比例因子的形状。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0,0,300,300);
// 均匀缩放
ctx.save()
ctx.translate(50,50);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
// 非均匀缩放（y方向）
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50,150);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();
// 非均匀缩放（x方向）
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50,250);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(133.333,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.translate(177.777,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.restore();
} else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
}
while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
HTML Canvas - 转换
直接修改转换矩阵的方法。转换矩阵最初必须是标识转换。然后可以使用转换方法对其进行调整。
| 方法 | 描述 |
|---|---|
| transform(m11, m12, m21, m22, dx, dy) | 更改转换矩阵以应用参数给出的矩阵。 |
| setTransform(m11, m12, m21, m22, dx, dy) | 将变换矩阵更改为参数给出的矩阵。 |
变换 （m11， m12， m21， m22， dx， dy） 方法必须将当前变换矩阵乘以 −
m11 m21 dx
m12 m22 dy
0 0 1
m12 m22 dy
0 0 1
setTransform（m11， m12， m21， m22， dx， dy） 方法必须将当前变换重置为单位矩阵，然后使用相同的参数调用 transform（m11， m12， m21， m22， dx， dy） 方法。
例子
下面是一个使用 transform() 和 setTransform() 方法的简单示例 −
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200, 200);
var c = 0;
for (var i=0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0, 0, 100, 100);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
ctx.fillRect(50, 50, 100, 100);
}
else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
HTML Canvas - 组合
影响所有绘图操作的组合属性 globalCompositeOperation。
在现有形状后面绘制新形状并遮罩某些区域，使用 globalCompositeOperation 属性从画布上清除部分。
可以为 globalCompositeOperation 设置以下值 ：
| 属性 | 描述 |
|---|---|
| source-over | 这是默认设置，可在现有画布内容上绘制新形状。 |
| source-in | 仅当新形状和目标画布重叠时，才会绘制新形状。其他一切都是透明的。 |
| source-out | 新形状的绘制位置与现有画布内容不重叠。 |
| source-atop | 仅绘制新形状与现有画布内容重叠的位置。 |
| lighter | 如果两个形状重叠，则通过添加颜色值来确定颜色。 |
| xor | 形状在重叠的地方变得透明，并在其他任何地方绘制正常。 |
| destination-over | 新形状绘制在现有画布内容后面。 |
| destination-in | 现有画布内容将保留在新形状和现有画布内容重叠的地方。其他一切都是透明的。 |
| destination-out | 现有内容将保留在不与新形状重叠的位置。 |
| destination-atop | 现有画布仅保留在与新形状重叠的地方。新形状绘制在画布内容后面。 |
| darker | 如果两个形状重叠，则通过减去颜色值来确定颜色。 |
例子
下面利用 globalCompositeOperation 属性创建所有可能的组合：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out',
'destination-atop','lighter','darker','copy','xor'
];
function drawShape(){
for (i=0;i<compositeTypes.length;i++){
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');
// 绘制矩形
ctx.fillStyle = "#FF3366";
ctx.fillRect(15,15,70,70);
// 设置组合属性
ctx.globalCompositeOperation = compositeTypes[i];
// 画圆
ctx.fillStyle = "#0066FF";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}
</script>
</head>
<body onload="drawShape();">
<table border="1" align="center">
<tr>
<td><canvas id="tut0" width="125" height="125"></canvas><br/>
<label id="lab0"></label>
</td>
<td><canvas id="tut1" width="125" height="125"></canvas><br/>
<label id="lab1"></label>
</td>
<td><canvas id="tut2" width="125" height="125"></canvas><br/>
<label id="lab2"></label>
</td>
</tr>
<tr>
<td><canvas id="tut3" width="125" height="125"></canvas><br/>
<label id="lab3"></label>
</td>
<td><canvas id="tut4" width="125" height="125"></canvas><br/>
<label id="lab4"></label>
</td>
<td><canvas id="tut5" width="125" height="125"></canvas><br/>
<label id="lab5"></label>
</td>
</tr>
<tr>
<td><canvas id="tut6" width="125" height="125"></canvas><br/>
<label id="lab6"></label>
</td>
<td><canvas id="tut7" width="125" height="125"></canvas><br/>
<label id="lab7"></label>
</td>
<td><canvas id="tut8" width="125" height="125"></canvas><br/>
<label id="lab8"></label>
</td>
</tr>
<tr>
<td><canvas id="tut9" width="125" height="125"></canvas><br/>
<label id="lab9"></label>
</td>
<td><canvas id="tut10" width="125" height="125"></canvas><br/>
<label id="lab10"></label>
</td>
<td><canvas id="tut11" width="125" height="125"></canvas><br/>
<label id="lab11"></label>
</td>
</tr>
</table>
</body>
</html>
HTML Canvas - 动画
绘制图像并完全擦除图像的方法，借助 Javascript 在 HTML 画布上模拟良好动画。
在画布上为图像制作动画的两种 Javascript 方法：
| 方法 | 描述 |
|---|---|
| setInterval(callback, time); | 在给定的时间毫秒后重复执行提供的代码。 |
| setTimeout(callback, time); | 仅在给定时间毫秒后执行一次提供的代码。 |
例子
下面是一个重复旋转小图像的简单示例:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var pattern= new Image();
function animate(){
pattern.src = '/html/images/pattern.jpg';
setInterval(drawShape, 100);
}
function drawShape(){
// 使用DOM获取canvas元素
var canvas = document.getElementById('mycanvas');
// 确保在canvas不受支持时不执行
if (canvas.getContext){
// 使用getContext使用画布进行绘图
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(pattern,-3.5,-3.5);
ctx.restore();
}
else {
alert('您需要Safari或Firefox 1.5+才能观看此演示。');
}
}
</script>
</head>
<body onload="animate();">
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>
