html5教程:canvas元素

html5的canvas元素使用javascript在网页上绘制图像。canvas的基本属性和方法有:width,height,getContext()等。通过width与height来设置canvas的宽高。通过getContext()来获取当前画布的绘图环境。

创建canvas元素

向html5添加canvas元素,设置宽高。

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

通过javascript绘制图形

canvas本身并不能绘图,而是通过js来实现。添加js:

<script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var cxt=c.getContext("2d");
		cxt.fillStyle="#f00";
		cxt.fillRect(10,10,100,70);
	</script>

使用id寻找到canvas

var c=document.getElementById("myCanvas");

创建context对象

var cxt=c.getContext("2d");

绘制一个红色矩形,并设置其起点和大小。其中fillRect(10,10,100,70)是设置一个矩形,起点为(10,10),大小是(100,70):

cxt.fillStyle="#f00";
cxt.fillRect(10,10,100,70);

效果如下图:js画矩形

canvas实例:线条

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>
    <script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var cxt=c.getContext("2d");
		cxt.moveTo(10,10);
		cxt.lineTo(100,70);
		cxt.lineTo(30,50);
		cxt.stroke();
	</script>

效果如下:js画直线

canvas实例:圆形

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>
    <script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var cxt=c.getContext("2d");
		cxt.fillStyle="#f00";
		cxt.beginPath();
		cxt.arc(75,50,20,0,Math.PI*2,true);
		cxt.closePath();
		cxt.fill();
	</script>

效果如下:

 

 

马上分享给你的朋友吧~

html5教程:canvas元素》上有 1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>