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

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

JavaScript 使用 id 来寻找 canvas 元素：

然后，创建 context 对象：

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

实例：把鼠标悬停在矩形上可以看到坐标

下面的在 canvas 元素上进行绘画的更多实例：

通过指定从何处开始，在何处结束，来绘制一条线：

JavaScript 代码：

canvas 元素：

亲自试一试

通过规定尺寸、颜色和位置，来绘制一个圆：

JavaScript 代码：

canvas 元素：

亲自试一试

使用您指定的颜色来绘制渐变背景：

JavaScript 代码：

canvas 元素：

亲自试一试

把一幅图像放置到画布上：

JavaScript 代码：

canvas 元素：

亲自试一试

如需学习有关画布的更多知识，请访问我们的 HTML Canvas 教程。

参考手册：HTML 5 标签

参考手册：HTML DOM Canvas 对象

W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。

关于 W3School 帮助 W3School 使用条款 隐私条款 技术支持：赢科 蒙ICP备06004630号