前端---浅谈HTML5中canvas元素用法

<canvas>标签-------------------------------------------------HTML5新增元素,该元素主要用于绘制图形.但实际上,canvas元素自身并不绘制图形,它只是相当于一张空画布.如果我们需要向<canvas.../>上绘制图形,就必须使用Javascript脚本进行绘制.

canvas元素的定义方式与HTML中其他元素定义的方式并无任何相同,其中:

height:该属性设置该画布组件高度.
width:该属性设置该画布组件宽度.

<canvas id="mc",width="300" height="180"></canvas>

在上面代码中我们就定义了一个<canvas.../>元素,并设定了画布的高度和宽度.但是在定义一个canvas元素后,它只是一张''空白"的画布,要向在上面绘图仍需经过以下3个步骤:
获取<canvas.../>元素对应的DOM对象,这是一个canvas对象.
调用Canvas对象的getContext()方法,该方法返回一个CanvasRenderingContext2D对象,该对象即可绘制图形.
调用CanvasRenderingContext2D带对象的方法进行绘制图形.

在前面中介绍到的 CanvasRenderingContext2D对象中拥有许多绘图的方法,在这里我们列举几种常用的方法供大家参考,如果需要详细了解CanvasRenderingContext2D对象的所有方法,可以查询JavaScript关于此对象的API来进行查找.

void fill() //填充Canvas的当前路径
void fillRect(double x,double y,double width,double height) //填充一个矩形区域
void fillText(String text,double x,double y,[double max Width]) //填充字符串
void strokeRect(double x,double y,double width,double height) //绘制一个矩形边框
void lineto(double x,double y) //把Canvas的当前路径从当前结束点连接到x,y对应的点
void moveto(double x,double y) //把Canvas的当前路径从结束点移动到x,y对应的点

在最后下面中我们用代码以及效果图为大家展示一下canvas元素的功能:

本程序代码如下:


<!DOCTYPE html>
<html> 
  	<head></head>
	<body>
		<h2>画图入门</h2>
        	<canvas id="mc" width="600" height="280"
        	   style="border:1px solid black"></canvas>
			<script type="text/javascript">
				var canvas=document.getElementById('mc');
        			var ctx=canvas.getContext('2d');
				ctx.shadowBlur=5.6;
				ctx.shadowColor="#222";
				ctx.shadowOffsetX=10;
				ctx.shadowOffsetY=-6;
				ctx.fillStyle='#00f';
				ctx.font="italic 50px 隶书";
				ctx.textBaseline='top';
				ctx.fillText('疯狂Java讲义',0,0);
                                ctx.strokeStyle='#f0f';
				ctx.font='bold 45px 宋体';
				ctx.strokeText('轻量级Java EE企业应用实践',0,50);
				ctx.fillRect(20,150,180,80);
				ctx.lineWidth=8;
				ctx.strokeRect(300,150,180,80);

			</script>
	</body>
</html>

最后网页效果图如下:

前端---浅谈HTML5中canvas元素用法

猜你喜欢