HTML 画布 Canvas
HTML<canvas>元素用于在网页上绘制图形。
下面的图形是用<canvas>创建的。它显示四个元素：红色矩形、渐变矩形、多色矩形和多色文本。
什么是HTML画布？
HTML<canvas>元素用于通过 JavaScript 动态绘制图形。
<canvas>元素只是图形的容器。必须使用 JavaScript 来实际绘制图形。
Canvas有几种绘制路径、框、圆、文本和添加图像的方法。
浏览器支持
表中的数字指定完全支持<canvas>元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
画布示例
画布是HTML页面上的矩形区域。默认情况下，画布没有边框和内容。
<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">你的浏览器不支持 canvas 标签.</canvas></body></html>
注意：总是指定一个id属性（在脚本中引用），以及一个 width 和 height 属性来定义画布的大小。要添加边框，请使用 sytle 属性。
加入 javascript
画一条线
<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">你的浏览器不支持 canvas 标签.</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();</script></body></html>
画一条线
<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">你的浏览器不支持 canvas 标签.</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();</script></body></html>
写一段文本
<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">你的浏览器不支持 canvas 标签.</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.font = "30px Arial";ctx.fillText("Hello World",10,50);</script></body></html>
画一段线性渐变
<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">你的浏览器不支持 canvas 标签.</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// Create gradientvar grd = ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80);</script></body></html>
画一个圆形渐变
<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">你的浏览器不支持 canvas 标签.</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// Create gradientvar grd = ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80);</script></body></html>
Canvas - 图像
把一幅图像放置到画布上, 使用方法: drawImage(image,x,y)
<!DOCTYPE html><html><body><p>Image to use:</p><img id="myPic" src="/images/demo.png" alt="The Demo" width="520" height="320"><p>Canvas to fill:</p><canvas id="myCanvas" width="550" height="350"style="border:1px solid #d3d3d3;">你的浏览器不支持 canvas 标签.</canvas><p><button onclick="myCanvas()">尝试一下</button></p><script>function myCanvas() {var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var img = document.getElementById("myPic");ctx.drawImage(img,10,10);}</script></body></html>