本文概述
HTML canvas元素为HTML提供了一个可使用位图的表面。它用于在网页上绘制图形。
HTML 5 <canvas>标记用于使用脚本语言（如JavaScript）绘制图形。
<canvas>元素只是用于图形的容器, 必须使用脚本语言才能绘制图形。 <canvas>元素允许对2D形状和位图图像进行动态且可编写脚本的渲染。
它是一种低级的过程模型, 可更新位图且没有内置场景。画布中有几种绘制路径, 框, 圆, 文本和添加图像的方法。
如何创建HTML画布？
画布是HTML页面上类似矩形的区域。用canvas元素指定。默认情况下, <canvas>元素没有边框, 也没有内容, 就像一个容器。
<canvas id = "mycanvas" width ="200" height ="100"> </canvas>HTML 5 Canvas标签示例
<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
Your browser does not support the HTML5 canvas tag.
</canvas>立即测试
输出：
你的浏览器不支持HTML5 canvas标签。
注意：始终需要指定id属性和height＆width属性来定义画布的大小。一个HTML页面上可以有多个canvas元素。
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <canvas> | Yes | Yes | Yes | Yes | Yes |
带有JavaScript的HTML画布标签
画布是二维网格。
坐标（0, 0）定义画布的左上角。参数（0, 0, 200, 100）用于fillRect()方法。此参数将填充从左上角（0, 0）开始的矩形, 并绘制200 * 100矩形。
<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 100);
</script>输出：
你的浏览器不支持HTML5 canvas标签。
在画布上画线
如果要在画布上绘制直线, 可以使用以下两种方法。
moveTo（x, y）：用于定义线的起点。
lineTo（x, y）：用于定义线的终点。
如果绘制起点为（0, 0）且终点为（200, 100）的线, 请使用描边方法绘制该线。
<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>输出：
你的浏览器不支持HTML5 canvas标签。
在画布上绘制圆
如果要在画布上绘制圆, 可以使用arc()方法：
arc(x, y, r, start, stop)要在HTML画布上绘制圆, 请使用ink()方法之一, 例如stroke()或fill()。
<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasCircle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke();
</script>输出：
你的浏览器不支持HTML5 canvas标签。
在画布上绘制文字
有一些属性和方法可用于在画布上绘制文本。
字体属性：用于定义文本的字体属性。
fillText（text, x, y）方法：用于在画布上绘制填充文本。它看起来像粗体。
strokeText（text, x, y）方法：它也用于在画布上绘制文本, 但文本未填充。
让我们看一下fillText()方法示例。
<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3d3;">
Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello srcmini", 10, 50);
</script>输出：
抱歉!你的浏览器不支持HTML5 canvas标签。
让我们看一下strokeText()方法示例。
<canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #d3d3d3;">
Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText2");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello srcmini", 10, 50);
</script>输出：
抱歉！升级你的浏览器。它不支持HTML5 canvas标签。
