HTML Canvas 图形

<canvas>元素用于在网页上绘制图形。其主要通过 JavaScript 动态绘制图形。<canvas>元素只是图形的容器。您必须使用 JavaScript 来实际绘制图形。

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

Canvas 标签

Canvas 是 HTML 页面上的一个矩形区域。默认情况下，画布没有边框，也没有内容。

标记如下所示：

示例

<canvas id="myCanvas" width="200" height="100"></canvas>

注意：始终指定一个id属性（在脚本中引用），以及一个width和height属性来定义画布的大小。要添加边框，请使用style属性。

示例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

添加一个 JavaScript

创建矩形画布区域后，您必须添加 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>