HTML画布教程
HTML <canvas>元素用于在网页上绘制图形。
使用<canvas>创建左侧的图形。它显示四个元素：红色矩形，渐变矩形，多色矩形和多色文本。
什么是HTML画布？
HTML <canvas>元素用于通过脚本（通常为JavaScript）即时绘制图形。
<canvas>元素只是图形的容器。您必须使用脚本来实际绘制图形。
画布有几种绘制路径，框，圆，文本和添加图像的方法。
| Element |
|
|
|
|
|
| <canvas> |
4.0 |
9.0 |
2.0 |
3.1 |
9.0 |
HTML画布可以绘制文本
帆布可以绘制彩色文字，有或没有动画。
HTML画布可以绘制图形
画布具有图形数据呈现和图形和图表图像的巨大功能。
HTML画布可以动画化
画布对象可以移动。一切都是可能的：从简单的弹跳球到复杂的动画。
HTML画布可以互动
Canvas可以响应JavaScript事件。
帆布可以响应任何用户操作（按键点击，鼠标点击，按钮点击，手指移动）。
HTML画布可用于游戏
Canvas的动画方法为HTML游戏应用程序提供了很多可能性。
画布示例
在HTML中，<canvas>元素如下所示：
<canvas id =“myCanvas”width =“200”height =“100”> </ canvas>
<canvas>元素必须具有id属性，因此可以由JavaScript引用。
width和height属性是定义画布大小所必需的。
提示：您可以在一个HTML页面上有多个<canvas>元素。
注意默认情况下，<canvas>元素没有边框，没有内容。
要添加边框，请使用style属性：
例
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
完整源代码：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
</body>
</html>
|
