AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > html游戏

HTML画布教程

51自学网 http://www.51zixue.net

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>

 
上一篇:html5游戏中如何设置键盘的方向键控制组件的运动  下一篇:返回列表