Html 简明教程

HTML - Canvas

HTML 元素 <canvas> 提供了一种简单、强大的方式，可以使用 JavaScript 绘制图形。它可以用来绘制图形、制作相册合成或制作简单的（也可不简单）动画。

以下是仅有两个特定属性 width 和 height 以及所有核心 HTML 属性（如 id、name 和 class 等）的简单 <canvas> 元素。

<canvas id="mycanvas" width="100" height="100"></canvas>

您可以使用 getElementById() 方法轻松地在 DOM 中找到 <canvas> 元素，如下所示：

var canvas  = document.getElementById("mycanvas");

Example

让我们来看一个示例，它展示了如何在 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>

The Rendering Context

<canvas> 最初是空白的，要显示内容，脚本首先需要访问渲染上下文。canvas 元素有一个称为 getContext 的 DOM 方法，该方法用于获取渲染上下文及其绘图函数。此函数采用一个参数，即上下文类型 2d 。

Instance

以下是用于获取所需内容的代码，其中包含一个浏览器是否支持 <canvas> 元素的检查：

var canvas  = document.getElementById("mycanvas");
if (canvas.getContext){
   var ctx = canvas.getContext('2d');
   // drawing code here
} else {
   // canvas-unsupported code here
}

Browser Support

最新版本的 FireFox、Safari、Chrome 和 Opera 都支持 HTML Canvas，但 IE8 原生不支持 Canvas。

您可以使用 ExplorerCanvas 来通过 Internet Explorer 获得 Canvas 支持。您只需要按如下方式包含此 JavaScript 即可：

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

HTML Canvas - Drawing Rectangles

共有三种方法可以绘制 Canvas 上的矩形：

S.No.

Method & Description

1

fillRect(x,y,width,height) 此方法绘制一个填充矩形。

2

strokeRect(x,y,width,height) 此方法绘制矩形轮廓。

3

clearRect(x,y,width,height) 此方法清除指定区域并使其完全透明

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

Example

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

<!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 - Drawing Paths

我们需要使用以下方法在 Canvas 上绘制路径：

S.No.

Method & Description

1

beginPath() 此方法重置当前路径。

2

moveTo(x, y) 此方法使用给定点创建新的子路径。

3

closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点开始一个新的子路径。

4

fill() 此方法使用当前填充样式填充子路径。

5

stroke() 此方法使用当前描边样式，对子路径进行描边。

6

arc(x, y, radius, startAngle, endAngle, anticlockwise) 将点添加到子路径中，使得由参数描述的圆周描述的弧形（从给定的开始角度开始，在给定的结束角度结束，并且按给定的方向进行）添加到路径，并通过一条直线连接到上一点。

Example

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

<!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 - Drawing Lines

Line Methods

我们需要使用以下方法在 Canvas 上绘制线条：

S.No.

Method & Description

1

beginPath() 此方法重置当前路径。

2

moveTo(x, y) 此方法使用给定点创建新的子路径。

3

closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点开始一个新的子路径。

4

fill() 此方法使用当前填充样式填充子路径。

5

stroke() 此方法使用当前描边样式，对子路径进行描边。

6

此方法将给定点添加到当前子路径，由一条直线连接到前一个点。

Example

这是一个简单的示例，利用了上述方法来绘制一个三角形。

<!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 - Drawing Bezier Curves

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

S.No.

Method & Description

1

beginPath() 此方法重置当前路径。

2

moveTo(x, y) 此方法使用给定点创建新的子路径。

3

closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点开始一个新的子路径。

4

fill() 此方法使用当前填充样式填充子路径。

5

stroke() 此方法使用当前描边样式，对子路径进行描边。

6

此方法将给定点添加到当前路径，由一条与给定控制点相连的三次贝塞尔曲线连接到前一个点。

bezierCurveTo() 方法中的 x 和 y 参数是终点的坐标。cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个控制点的坐标。

Example

以下是一个简单的示例，利用上述方法来绘制贝塞尔曲线。

<!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 - Drawing Quadratic Curves

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

S.No.

Method & Description

1

beginPath() 此方法重置当前路径。

2

moveTo(x, y) 此方法使用给定点创建新的子路径。

3

closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点开始一个新的子路径。

4

fill() 此方法使用当前填充样式填充子路径。

5

stroke() 此方法使用当前描边样式，对子路径进行描边。

6

此方法将给定点添加到当前路径，由一条与给定控制点连接的二次贝塞尔曲线连接到前一个点。

quadraticCurveTo() 方法中的 x 和 y 参数是终点的坐标。 cpx 和 cpy 是控制点的坐标。

Example

以下是一个简单的示例，利用上述方法来绘制二次曲线。

<!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 - Using Images

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

S.No.

Method & Description

1

beginPath() 此方法重置当前路径。

2

moveTo(x, y) 此方法使用给定点创建新的子路径。

3

closePath() 此方法将当前子路径标记为已关闭，并使用与新关闭子路径的起点和终点相同的点开始一个新的子路径。

4

fill() 此方法使用当前填充样式填充子路径。

5

stroke() 此方法使用当前描边样式，对子路径进行描边。

6

此方法将给定的图像绘制到画布上。此处的 image 是对图像或画布对象的引用。x 和 y 形成目标画布上的坐标，我们的图像应放置在该坐标上。

Example

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

<!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 - Create Gradients

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

S.No.

Method & Description

1

此方法在给定的偏移量处向渐变中添加一个具有给定颜色的颜色停止。此处 0.0 是渐变一端的偏移量，1.0 是另一端的偏移量。

2

此方法返回一个 CanvasGradient 对象，该对象表示一个沿由参数表示的坐标给出的线绘制的线性渐变。这四个参数分别表示渐变的起点 (x1,y1) 和终点 (x2,y2)。

3

此方法返回一个 CanvasGradient 对象，该对象表示一个沿由参数表示的圆形绘制的径向渐变。前三个参数定义了一个坐标为 (x1,y1) 且半径为 r1 的圆，第二个参数定义了一个坐标为 (x2,y2) 且半径为 r2 的圆。

Example - Linear Gradient

以下是一个简单的示例，利用上述方法创建线性渐变。

<!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>

Example - Radial Gradient

以下是一个简单的示例，利用上述方法创建径向渐变。

<!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 - Styles and Colors

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

S.No.

Method & Description

1

fillStyle 此属性表示用于形状内部的颜色或样式。

2

strokeStyle 此属性表示用于形状周围线条的颜色或样式。

默认情况下，描边和填充颜色设置为黑色（这是 CSS 颜色值 #000000）。

Example - 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>

Example - 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 - Text and Fonts

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

S.No.

Property & Description

1

font [ = value ] 此属性返回当前字体设置，并且可以设置以更改字体。

2

textAlign [ = value ] 此属性返回当前文本对齐设置，并且可以设置以更改对齐方式。可能的值有 start、end、left、right 和 center。

3

textBaseline [ = value ] 此属性返回当前基线对齐设置，可以进行设置，以便更改基线对齐。可能的值包括顶部、悬挂式、中间、字母、象形文字和底部

4

fillText(text, x, y [, maxWidth ] ) 此属性在由给定坐标 x 和 y 指示的给定位置填充给定文本。

5

strokeText(text, x, y [, maxWidth ] ) 此属性在由给定坐标 x 和 y 指示的给定位置绘制给定文本。

Example

下面是一个简单的示例，它利用上述属性来绘制文本 −

<!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 - Pattern and Shadow

Create Pattern

需要下列方法才能在画布上创建图案 −

S.No.

Method & Description

1

createPattern(image, repetition) 此方法将使用图像创建图案。第二个参数可以是一个字符串，其中包含以下值之一：repeat、repeat-x、repeat-y 和 no-repeat。如果指定空字符串或 null，则重复将。被认为

Example

下面是一个简单的示例，它利用上述方法来创建精美的图案。

<!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>

假设我们有以下图案 −

pattern

Create Shadows

HTML 画布提供了在绘图周围创建精致阴影的功能。所有绘图操作都会受到四个全局阴影属性の影響。

S.No.

Property & Description

1

shadowColor [ = value ] 此属性返回当前阴影颜色，可以设置，以更改阴影颜色。

2

shadowOffsetX [ = value ] 此属性返回当前阴影偏移量 X，可以设置，以更改阴影偏移量 X。

3

shadowOffsetY [ = value ] 此属性返回当前阴影偏移量 Y，可以设置，更改阴影偏移量 Y。

4

shadowBlur [ = value ] 此属性返回应用到阴影的当前模糊级别，可以设置，以更改模糊级别。

Example

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

<!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 - Save and Restore States

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

  1. 变换，如平移、旋转和缩放等。

  2. The current clipping region.

  3. 以下属性的当前值 − strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation、font、textAlign、textBaseline。

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

S.No.

Method & Description

1

save() 此方法将当前状态推到堆栈上。

2

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

Example

以下是一个简单示例，利用上述方法展示如何调用 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 - Translation

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

此处，参数 x 是画布向左或向右移动的量，y 是向上或向下移动的量。

Example

以下是一个简单示例，利用上述方法绘制各种 Spirograph。

<!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 - Rotation

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

此方法仅接受一个参数，即画布旋转的角度。这是一个以弧度为单位的顺时针旋转。

Example

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

<!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 - Scaling

HTML 画布提供了一个 scale(x, y) 方法，用于增加或减少我们画布网格的单位值。这可以用来绘制缩小或放大的图形和位图。

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

这个方法的返回值小于 1.0 会减小单位大小，而大于 1.0 的值会增大单位大小。将缩放因子精确地设置为 1.0 不会影响单位大小。

Example

以下是使用 spirograph 函数绘制九个不同缩放因子的图形的简单示例。

<!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 - Transforms

HTML 画布提供的方法允许对变换矩阵进行直接修改。变换矩阵最初必须是恒等变换。然后可以使用转换方法调整它。

S.No.

Method & Description

1

这个方法将变换矩阵改为应用给定参数的矩阵。

2

这个方法将变换矩阵改为给定参数的矩阵。

变换 (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) 方法。

Example

以下是使用 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 - Composition

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

我们可以用全局合成操作属性在现有形状后面绘制新形状并遮盖某些区域，从画布中清除部分区域，如下所示。

以下是可以设置的全局合成操作的值：

S.No.

Attribute & Description

1

这是默认设置，它会在现有画布内容之上绘制新的形状。

2

新形状仅在新的形状和目标画布都重叠的地方绘制。其他所有内容都变为透明。

3

新形状在不与现有画布内容重叠的地方绘制。

4

新形状仅在重叠现有画布内容的地方绘制。

5

当两个形状都重叠时，颜色由添加颜色值决定。

6

当两个形状都重叠时，形状会变为透明，其他地方则正常绘制。

7

新的形状绘制在现有的画布内容后面。

8

现有的画布内容被保留在新的形状和现有的画布内容重叠的地方。其他所有内容变为透明。

9

现有的内容被保留在不与新形状重叠的地方。

10

现有的画布仅保留在其与新形状重叠的地方。 新形状绘制在画布后面。

11

形状重叠的地方，颜色通过减去颜色值来确定。

Example

以下是一个简单的示例，它利用 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 - Animations

HTML 画布提供了必要的方法来绘制一个图像并完全擦除它。我们可以借助 Javascript 来模拟 HTML 画布上的良好动画。

以下两种重要的 Javascript 方法可用于在画布上动画化图像 −

S.No.

Method & Description

1

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

2

此方法仅在给定的 time 毫秒后一次执行提供的代码。

Example

以下是一个简单的示例，它将重复旋转一个小图像 −

<!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>