HTML教程-HTML<canvas>标签
HTML canvas 元素提供了一个位图的表面，用于在网页上绘制图形。
HTML 5 的 <canvas> 标签用于使用 JavaScript 等脚本语言绘制图形。
<canvas> 元素只是一个用于图形的容器，你需要使用脚本语言来绘制图形。 <canvas> 元素允许以动态和可脚本的方式渲染 2D 形状和位图图像。
它是一个低级别的、过程化的模型，更新位图而没有内置场景。Canvas 中有几种方法可以绘制路径、矩形、圆形、文本和添加图像。
如何创建 HTML Canvas？
Canvas 是一个矩形区域，在 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;"></canvas>输出
注意：始终需要指定 id 属性和 width、height 属性来定义 canvas 的大小。一个 HTML 页面上可以有多个 canvas 元素。
支持的浏览器
| 元素 |  Chrome |  IE |  Firefox |  Opera |  Safari |
|---|---|---|---|---|---|
| <canvas> | 是 | 是 | 是 | 是 | 是 |
使用 JavaScript 的 HTML Canvas 标签
Canvas 是一个二维网格。
坐标 (0,0) 定义了 canvas 的左上角。参数 (0,0,200,100) 用于 fillRect() 方法。该参数将从左上角 (0,0) 开始绘制一个宽度为 200，高度为 100 的矩形。
<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,200,100);
</script>输出
在 Canvas 上绘制直线
如果你想在 canvas 上绘制一条直线，可以使用以下两种方法。
moveTo(x, y): 用于定义线的起点。
lineTo(x, y): 用于定义线的终点。
如果你绘制一条起点为 (0,0)，终点为 (200,100) 的线条，请使用 stroke 方法绘制线条。
<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvasLine");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>输出
在 Canvas 上绘制圆
如果你想在 canvas 上绘制一个圆，可以使用 arc() 方法：
<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;"></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>输出
在 Canvas 上绘制文本
有一些属性和方法用于在 canvas 上绘制文本。
font 属性： 用于定义文本的字体属性。
fillText(text, x, y) 方法： 用于在 canvas 上绘制填充的文本，看起来像是粗体字。
strokeText(text, x, y) 方法： 也用于在 canvas 上绘制文本，但文本不会被填充。
让我们看看 fillText() 方法的示例。
<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3c3;"></canvas>
<script>
var c = document.getElementById("myCanvasText1");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello JavaTpoint", 10, 50);
</script>输出
让我们看看 strokeText() 方法的示例。
canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #d3d3c3;"></canvas>
<script>
var c = document.getElementById("myCanvasText2");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello JavaTpoint", 10, 50);
</script>输出
