HTML 画布 Canvas

HTML<canvas>元素用于在网页上绘制图形。

下面的图形是用<canvas>创建的。它显示四个元素:红色矩形、渐变矩形、多色矩形和多色文本。

Your browser does not support the canvas element.


什么是HTML画布?

HTML<canvas>元素用于通过 JavaScript 动态绘制图形。

<canvas>元素只是图形的容器。必须使用 JavaScript 来实际绘制图形。

Canvas有几种绘制路径、框、圆、文本和添加图像的方法。


浏览器支持

表中的数字指定完全支持<canvas>元素的第一个浏览器版本。

元素
<canvas> 4.0 9.0 2.0 3.1 9.0

画布示例

画布是HTML页面上的矩形区域。默认情况下,画布没有边框和内容。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  5. 你的浏览器不支持 canvas 标签.
  6. </canvas>
  7. </body>
  8. </html>

注意:总是指定一个id属性(在脚本中引用),以及一个 width 和 height 属性来定义画布的大小。要添加边框,请使用 sytle 属性。


加入 javascript

画一条线

你的浏览器不支持 canvas 标签.

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  5. 你的浏览器不支持 canvas 标签.</canvas>
  6. <script>
  7. var c = document.getElementById("myCanvas");
  8. var ctx = c.getContext("2d");
  9. ctx.moveTo(0,0);
  10. ctx.lineTo(200,100);
  11. ctx.stroke();
  12. </script>
  13. </body>
  14. </html>

画一条线

你的浏览器不支持 canvas 标签.

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  5. 你的浏览器不支持 canvas 标签.</canvas>
  6. <script>
  7. var c = document.getElementById("myCanvas");
  8. var ctx = c.getContext("2d");
  9. ctx.beginPath();
  10. ctx.arc(95,50,40,0,2*Math.PI);
  11. ctx.stroke();
  12. </script>
  13. </body>
  14. </html>

写一段文本

你的浏览器不支持 canvas 标签.

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  5. 你的浏览器不支持 canvas 标签.</canvas>
  6. <script>
  7. var c = document.getElementById("myCanvas");
  8. var ctx = c.getContext("2d");
  9. ctx.font = "30px Arial";
  10. ctx.fillText("Hello World",10,50);
  11. </script>
  12. </body>
  13. </html>

画一段线性渐变

你的浏览器不支持 canvas 标签.

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  5. 你的浏览器不支持 canvas 标签.</canvas>
  6. <script>
  7. var c = document.getElementById("myCanvas");
  8. var ctx = c.getContext("2d");
  9. // Create gradient
  10. var grd = ctx.createLinearGradient(0,0,200,0);
  11. grd.addColorStop(0,"red");
  12. grd.addColorStop(1,"white");
  13. // Fill with gradient
  14. ctx.fillStyle = grd;
  15. ctx.fillRect(10,10,150,80);
  16. </script>
  17. </body>
  18. </html>

画一个圆形渐变

你的浏览器不支持 canvas 标签.

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  5. 你的浏览器不支持 canvas 标签.</canvas>
  6. <script>
  7. var c = document.getElementById("myCanvas");
  8. var ctx = c.getContext("2d");
  9. // Create gradient
  10. var grd = ctx.createRadialGradient(75,50,5,90,60,100);
  11. grd.addColorStop(0,"red");
  12. grd.addColorStop(1,"white");
  13. // Fill with gradient
  14. ctx.fillStyle = grd;
  15. ctx.fillRect(10,10,150,80);
  16. </script>
  17. </body>
  18. </html>

Canvas - 图像

把一幅图像放置到画布上, 使用方法: drawImage(image,x,y)

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>Image to use:</p>
  5. <img id="myPic" src="/images/demo.png" alt="The Demo" width="520" height="320">
  6. <p>Canvas to fill:</p>
  7. <canvas id="myCanvas" width="550" height="350"
  8. style="border:1px solid #d3d3d3;">
  9. 你的浏览器不支持 canvas 标签.</canvas>
  10. <p><button onclick="myCanvas()">尝试一下</button></p>
  11. <script>
  12. function myCanvas() {
  13. var c = document.getElementById("myCanvas");
  14. var ctx = c.getContext("2d");
  15. var img = document.getElementById("myPic");
  16. ctx.drawImage(img,10,10);
  17. }
  18. </script>
  19. </body>
  20. </html>