HTML - 画布

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');
   // drawing code here
} else {
   // canvas-unsupported code here
}

浏览器支持

最新版本的 Firefox、Safari、Chrome 和 Opera 都支持 HTML Canvas，但 IE8 本身不支持 canvas。

您可以使用 ExplorerCanvas 通过 Internet Explorer 获得 canvas 支持。您只需要包含以下 JavaScript 代码：

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

HTML Canvas - 绘制矩形

有三种方法可以在画布上绘制矩形：

序号	方法和描述
1	fillRect(x,y,width,height) 此方法绘制一个填充的矩形。
2	strokeRect(x,y,width,height) 此方法绘制一个矩形轮廓。
3	clearRect(x,y,width,height) 此方法清除指定区域并使其完全透明

序号

方法和描述

fillRect(x,y,width,height)

此方法绘制一个填充的矩形。

strokeRect(x,y,width,height)

此方法绘制一个矩形轮廓。

clearRect(x,y,width,height)

此方法清除指定区域并使其完全透明

这里 x 和 y 指定画布上矩形左上角位置（相对于原点），width 和 height 是矩形的宽度和高度。

示例

以下是一个简单的示例，它使用上述方法绘制一个漂亮的矩形。

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   
   <script type="text/javascript">
      function drawShape(){
         
         // Get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 绘制路径

我们需要以下方法在画布上绘制路径：

序号	方法和描述
1	beginPath() 此方法重置当前路径。
2	moveTo(x, y) 此方法使用给定点创建一个新的子路径。
3	closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点启动新的子路径。
4	fill() 此方法使用当前填充样式填充子路径。
5	stroke() 此方法使用当前笔触样式描边子路径。
6	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(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true);  // Outer circle
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
            ctx.stroke();
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>	
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>	
</html>

HTML Canvas - 绘制线条

线条方法

我们需要以下方法在画布上绘制线条：

序号	方法和描述
1	beginPath() 此方法重置当前路径。
2	moveTo(x, y) 此方法使用给定点创建一个新的子路径。
3	closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点启动新的子路径。
4	fill() 此方法使用当前填充样式填充子路径。
5	stroke() 此方法使用当前笔触样式描边子路径。
6	lineTo(x, y) 此方法将给定点添加到当前子路径，并通过直线连接到前一个点。

示例

以下是一个简单的示例，它使用上述方法绘制一个三角形。

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            // Filled triangle
            ctx.beginPath();
            ctx.moveTo(25,25);
            ctx.lineTo(105,25);
            ctx.lineTo(25,105);
            ctx.fill();
            
            // Stroked triangle
            ctx.beginPath();
            ctx.moveTo(125,125);
            ctx.lineTo(125,45);
            ctx.lineTo(45,125);
            ctx.closePath();
            ctx.stroke();
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 绘制贝塞尔曲线

我们需要以下方法在画布上绘制贝塞尔曲线：

序号	方法和描述
1	beginPath() 此方法重置当前路径。
2	moveTo(x, y) 此方法使用给定点创建一个新的子路径。
3	closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点启动新的子路径。
4	fill() 此方法使用当前填充样式填充子路径。
5	stroke() 此方法使用当前笔触样式描边子路径。
6	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(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 绘制二次曲线

我们需要以下方法在画布上绘制二次曲线：

序号	方法和描述
1	beginPath() 此方法重置当前路径。
2	moveTo(x, y) 此方法使用给定点创建一个新的子路径。
3	closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点启动新的子路径。
4	fill() 此方法使用当前填充样式填充子路径。
5	stroke() 此方法使用当前笔触样式描边子路径。
6	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(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 使用图像

本教程将展示如何将外部图像导入画布，然后如何使用以下方法在该图像上绘制：

序号	方法和描述
1	beginPath() 此方法重置当前路径。
2	moveTo(x, y) 此方法使用给定点创建一个新的子路径。
3	closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点启动新的子路径。
4	fill() 此方法使用当前填充样式填充子路径。
5	stroke() 此方法使用当前笔触样式描边子路径。
6	drawImage(image, dx, dy) 此方法将给定图像绘制到画布上。这里 image 是对图像或画布对象的引用。x 和 y 构成目标画布上应放置图像的坐标。

示例

以下是一个简单的示例，它使用上述方法导入图像。

<!DOCTYPE HTML>
<html>
<head>      
   <script type = "text/javascript">
      function drawShape() {
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext) {
         
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Draw shapes
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>   
<body onload = "drawShape();">
   <canvas id = "mycanvas"></canvas>
</body>  
</html>

HTML Canvas - 创建渐变

HTML canvas 允许我们使用以下方法使用线性渐变和径向渐变填充和描边形状：

序号	方法和描述
1	addColorStop(offset, color) 此方法在给定偏移量的渐变中添加具有给定颜色的颜色停止点。这里 0.0 是渐变一端的偏移量，1.0 是另一端的偏移量。
2	createLinearGradient(x0, y0, x1, y1) 此方法返回一个 CanvasGradient 对象，该对象表示一个线性渐变，沿着由参数表示的坐标给出的线绘制。四个参数表示渐变的起点 (x1,y1) 和终点 (x2,y2)。
3	createRadialGradient(x0, y0, r0, x1, y1, r1) 此方法返回一个 CanvasGradient 对象，该对象表示一个径向渐变，沿着由参数表示的圆锥体绘制。前三个参数定义一个具有坐标 (x1,y1) 和半径 r1 的圆，第二个参数定义一个具有坐标 (x2,y2) 和半径 r2 的圆。

序号

方法和描述

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(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create Linear Gradients
            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)');
            
            // assign gradients to fill and stroke styles
            ctx.fillStyle = lingrad;
            ctx.strokeStyle = lingrad2;
            
            // draw shapes
            ctx.fillRect(10,10,130,130);
            ctx.strokeRect(50,50,50,50);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </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() {
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext) {
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create gradients
            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)');
            
            // draw shapes
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 样式和颜色

HTML canvas 提供以下两个重要属性来将颜色应用于形状：

序号	方法和描述
1	fillStyle 此属性表示在形状内部使用的颜色或样式。
2	strokeStyle 此属性表示用于形状周围线条的颜色或样式

序号

方法和描述

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(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create a pattern
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </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(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // Create a pattern
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 文本和字体

HTML canvas 提供了使用不同字体和文本属性创建文本的功能，如下所示：

序号	属性和描述
1	font [ = value ] 此属性返回当前字体设置，并且可以设置以更改字体。
2	textAlign [ = value ] 此属性返回当前文本对齐设置，并且可以设置以更改对齐方式。可能的值为 start、end、left、right 和 center。
3	textBaseline [ = value ] 此属性返回当前基线对齐设置，并且可以设置以更改基线对齐方式。可能的值为 top、hanging、middle、alphabetic、ideographic 和 bottom
4	fillText(text, x, y [, maxWidth ] ) 此属性填充给定坐标 x 和 y 指定的给定位置的给定文本。
5	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(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 图案和阴影

创建图案

在画布上创建图案需要以下方法：

序号	方法和描述
1	createPattern(image, repetition) 此方法将使用图像创建图案。第二个参数可以是一个字符串，其值可以是以下之一：repeat、repeat-x、repeat-y 和 no-repeat。如果指定空字符串或 null，则将假设为 repeat。

示例

下面是一个简单的示例，它使用上述方法创建一个漂亮的图案。

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width:100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            // create new image object to use as pattern
            var img = new Image();
            img.src = '/html/images/pattern.jpg';
            img.onload = function(){
               
               // create pattern
               var ptrn = ctx.createPattern(img,'repeat');
               ctx.fillStyle = ptrn;
               ctx.fillRect(0,0,150,150);
            }
         } 
         else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

假设我们有以下图案：

创建阴影

HTML canvas 提供了在图形周围创建漂亮阴影的功能。所有绘图操作都受四个全局阴影属性的影响。

序号	属性和描述
1	shadowColor [ = 值 ] 此属性返回当前阴影颜色，并且可以设置以更改阴影颜色。
2	shadowOffsetX [ = 值 ] 此属性返回当前阴影 X 偏移量，并且可以设置以更改阴影 X 偏移量。
3	shadowOffsetY [ = 值 ] 此属性返回当前阴影 Y 偏移量，并且可以设置以更改阴影 Y 偏移量。
4	shadowBlur [ = 值 ] 此属性返回应用于阴影的当前模糊级别，并且可以设置以更改模糊级别。

示例

下面是一个简单的示例，它使用上述属性来绘制阴影。

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 保存和恢复状态

HTML canvas 提供了两种重要的保存和恢复 canvas 状态的方法。canvas 绘图状态基本上是所有已应用样式和变换的快照，包括以下内容：

诸如平移、旋转和缩放等变换。
当前剪切区域。
以下属性的当前值：strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline。

每次调用 save 方法时，canvas 状态都会存储到堆栈中，并且每次调用 restore 方法时，都会从堆栈中返回最后保存的状态。

序号	方法和描述
1	save() 此方法将当前状态压入堆栈。
2	restore() 此方法弹出堆栈上的顶部状态，将上下文恢复到该状态。

序号

方法和描述

save()

此方法将当前状态压入堆栈。

restore()

此方法弹出堆栈上的顶部状态，将上下文恢复到该状态。

示例

下面是一个简单的示例，它使用上述方法来演示如何调用restore 来恢复原始状态，最后一个矩形再次以黑色绘制。

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            
            //  draw a rectangle with default settings
            ctx.fillRect(0,0,150,150);
            
            //  Save the default state
            ctx.save();
            // Make changes to the settings
            ctx.fillStyle = '#66FFFF'
            ctx.fillRect( 15,15,120,120);
            
            // Save the current state
            ctx.save();
            // Make the new changes to the settings
            ctx.fillStyle = '#993333'
            ctx.globalAlpha = 0.5;
            ctx.fillRect(30,30,90,90);
            // Restore previous state
            ctx.restore();
            
            // Draw a rectangle with restored settings
            ctx.fillRect(45,45,60,60);
            // Restore original state
            ctx.restore();
            
            // Draw a rectangle with restored settings
            ctx.fillRect(40,40,90,90);
         } else {
            alert('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

HTML Canvas - 平移

HTML canvas 提供了translate(x, y) 方法，该方法用于将 canvas 及其原点移动到网格中的不同点。

这里参数 x 是 canvas 向左或向右移动的量，y 是其向上或向下移动的量。

示例

下面是一个简单的示例，它使用上述方法来绘制各种螺旋线：

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width:100px;
         height:100px;
         margin:0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
      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 - 旋转

HTML canvas 提供了rotate(angle) 方法，该方法用于围绕当前原点旋转 canvas。

此方法只接受一个参数，即 canvas 旋转的角度。这是一个以弧度为单位测量的顺时针旋转。

示例

下面是一个简单的示例，我们运行两个循环，第一个循环确定环数，第二个循环确定每个环中绘制的点数。

<!DOCTYPE html>
<html>
<head>
   <style>
      #test {
         width: 100px;
         height:100px;
         margin: 0px auto;
      }
   </style>
   <script type="text/javascript">
      function drawShape(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body id="test" onload="drawShape();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

HTML Canvas - 缩放

HTML canvas 提供了scale(x, y) 方法，该方法用于增加或减少 canvas 网格中的单位。这可以用于绘制缩小或放大的形状和位图。

此方法接受两个参数，其中 x 是水平方向的缩放因子，y 是垂直方向的缩放因子。这两个参数必须是正数。

小于 1.0 的值会减小单位大小，大于 1.0 的值会增加单位大小。将缩放因子精确设置为 1.0 不会影响单位大小。

示例

下面是一个简单的示例，它使用螺旋线函数绘制具有不同缩放因子的九个形状。

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript">
      function drawShape(){
         
         // Get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // Use getContext to use the canvas for drawing
            var ctx = canvas.getContext('2d');
            ctx.strokeStyle = "#fc0";
            ctx.lineWidth = 1.5;
            ctx.fillRect(0,0,300,300);
            
            // Uniform scaling
            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();
            
            // Non uniform scaling (y direction)
            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();
            
            // Non uniform scaling (x direction)
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
      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 - 变换

HTML canvas 提供了允许直接修改变换矩阵的方法。变换矩阵最初必须是单位变换。然后可以使用变换方法对其进行调整。

序号	方法和描述
1	transform(m11, m12, m21, m22, dx, dy) 此方法更改变换矩阵以应用参数给出的矩阵。
2	setTransform(m11, m12, m21, m22, dx, dy) 此方法将变换矩阵更改为参数给出的矩阵。

序号

方法和描述

transform(m11, m12, m21, m22, dx, dy)

此方法更改变换矩阵以应用参数给出的矩阵。

setTransform(m11, m12, m21, m22, dx, dy)

此方法将变换矩阵更改为参数给出的矩阵。

transform (m11, m12, m21, m22, dx, dy) 方法必须将当前变换矩阵与以下矩阵相乘：

m11     m21     dx
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(){
         
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

HTML Canvas - 合成

HTML canvas 提供了合成属性globalCompositeOperation，它会影响所有绘图操作。

我们可以使用 globalCompositeOperation 属性在现有形状后面绘制新形状，屏蔽某些区域，从 canvas 中清除部分区域，如下例所示。

globalCompositeOperation 可以设置以下值：

序号	属性和描述
1	source-over 这是默认设置，它在现有 canvas 内容的顶部绘制新形状。
2	source-in 新形状仅在新的形状和目标 canvas 重叠的地方绘制。其他所有内容都将变为透明。
3	source-out 新形状在它不与现有 canvas 内容重叠的地方绘制。
4	source-atop 新形状仅在其与现有 canvas 内容重叠的地方绘制。
5	lighter 如果两个形状重叠，则颜色由添加颜色值确定。
6	xor 如果两个形状重叠，则形状将变为透明，其他地方则正常绘制。
7	destination-over 新形状绘制在现有 canvas 内容的后面。
8	destination-in 如果新的形状和现有 canvas 内容重叠，则保留现有 canvas 内容。其他所有内容都将变为透明。
9	destination-out 如果现有内容不与新形状重叠，则保留现有内容。
10	destination-atop 现有 canvas 仅在其与新形状重叠的地方保留。新形状绘制在 canvas 内容的后面。
11	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');
            
            // draw rectangle
            ctx.fillStyle = "#FF3366";
            ctx.fillRect(15,15,70,70);
            
            // set composite property
            ctx.globalCompositeOperation = compositeTypes[i];
            
            // draw circle
            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 - 动画

HTML canvas 提供了绘制图像并将其完全擦除的必要方法。我们可以借助 Javascript 在 HTML canvas 上模拟良好的动画。

以下是用于在 canvas 上制作图像动画的两种重要的 Javascript 方法：

序号	方法和描述
1	setInterval(callback, time); 此方法在给定的 time 毫秒后重复执行提供的代码。
2	setTimeout(callback, time); 此方法仅在给定的 time 毫秒后执行一次提供的代码。

序号

方法和描述

setInterval(callback, time);

此方法在给定的 time 毫秒后重复执行提供的代码。

setTimeout(callback, time);

此方法仅在给定的 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(){
         // get the canvas element using the DOM
         var canvas = document.getElementById('mycanvas');
         
         // Make sure we don't execute when canvas isn't supported
         if (canvas.getContext){
            
            // use getContext to use the canvas for drawing
            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('You need Safari or Firefox 1.5+ to see this demo.');
         }
      }
   </script>
</head>
<body onload="animate();">
   <canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>

打印页面