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

 

用JavaScript绘制画布

HTML画布上的所有绘图必须使用JavaScript完成:


<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
完整代码:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>
 
分析:

步骤1:查找画布元素

首先,您必须找到<canvas>元素。


这通过使用HTML DOM方法getElementById()完成:


var canvas = document.getElementById(“myCanvas”);

步骤2:创建绘图对象

其次,您需要画布的绘图对象。


getContext()是一个内置的HTML对象,具有用于绘制的属性和方法:


var ctx = canvas.getContext(“2d”);

步骤3:画在画布上

最后,您可以在画布上绘制。


将绘图对象的填充样式设置为红色:


ctx.fillStyle =“#FF0000”;

fillStyle属性可以是CSS颜色,渐变或模式。 默认的fillStyle是黑色的。


fillRect(x,y,width,height)方法在画布上绘制一个填充填充样式的矩形:


ctx.fillRect(0,0,150,75);


 
上一篇:HTML画布教程  下一篇:返回列表