画布(canvas)是HTML5中新增加的一个非常重要的元素,在页面上放置一个canvas元素,就相当于在页面上放置了一块画布,使用它的API,我们可以通过绘制的方式实现图形、线条和文字的显示。
1. 目标:绘制中小学教学使用的工具
使用画布元素,快速绘制一个中小学教学使用的工具,效果如下:
2. 步骤
任何事物都是从最简单最基础的部分开始,最终形成复杂的庞大的结构。这里介绍如何实现最简单的图形绘制,包括直线、矩形、园等。
实现上述的图形效果,需要掌握画布的下列API的使用方法:
直接绘制方法
圆形绘制方法
文字绘制方法
同时,还要掌握在图形绘制时图形和文字的颜色配制、线条闭合路径设置和图形的填充及描绘的过程。
3. 过程
3.1 在页面中添加画布元素,代码如下:
<div>
<!-- 定义一个画布元素-->
<canvas id="cvs" name="cvs"width="320" height="480" >
你的浏览器不支持画布元素
</canvas>
</div>
由于canvas是HTML5中新增元素,因此,需要考虑到它对浏览器的兼容性,如果不兼容该元素时,元素中的文字将显示在页面中。
下列代码用于获取元素的上下文环境对象:
var c=document.getElementById("cvs");
var cxt=c.getContext("2d");
在上述代码中,先通过id的方式获取到元素对象,并调用它的getContext方法,然后以2d的形式来绘制画布中的图形效果。
3.2 线条的绘制
使用上下文环境对象中的moveTo(x,y)方法,设置起始点的定位。
定好起始点后,再使用lineTo(x,y)方法绘制到达的终站位置。
lineTo(x,y)方法可以使用多次,用于绘制多条线条的图形。
cxt.beginPath();
cxt.lineWidth = 2;
cxt.strokeStyle="blue";
cxt.moveTo(70,120);
cxt.lineTo(70,320);
cxt.lineTo(260,320);
cxt.lineTo(70,121);
cxt.stroke();
cxt.closePath();
3.3 圆形的绘制
与线条绘制不同,圆形的绘制更加简单,它的API方法代码如下:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
各参数的功能如下表所示:
cxt.beginPath();
cxt,lineWidth = 5;
cxt.strokeStyle="green";
cxt.arc(130,260,25,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
在上述代码中,以闭合的路径方式,先配置圆线条的宽度和颜色,再调用arc方法绘制一个指定圆点和半径的图形,最后调用stroke(),按设定的路径进行绘制。
3.4 文字的绘制
画布中,文字的绘制更加简单,只要确定文字内容、坐标值就可以绘制了。
context.fillText(text,x,y,maxWidth);
各参数的功能如下表所示:
cxt.beginPath();
cxt.font ="25px 黑体";
cxt.fillStyle = "red";
cxt.fillText("绘制教学工具",70,380,200);
cxt.closePath();
在上述代码中,以闭合路径的方式绘制文字,先设定文字的大小与字体,再配置字体的颜色值,完成配置后,最后调用fillText()方法实现文字在指定坐标的绘制。
4. 总结
通过本示例的介绍,初步掌握画布元素的基础使用和以下画布API的调用:
如何绘制一条独立或闭合的线条。
绘制一个指定圆点和半径的圆形。
在画布中以绘制的方式添加文字。
画布元素的基础功能相对简单,但在使用画布元素开发大型项目时,这些基础的知识点则是开发过程中的核心内容,反复练习画布元素的基础API是熟练掌握它使用的有效方法。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布DEMO</title>
<style>
div{
margin:0 auto;
width:600px;
}
</style>
</head>
<body>
<div>
<!-- 定义一个画布元素-->
<canvas id="cvs" name="cvs"width="320" height="480" >
你的浏览器不支持画布元素
</canvas>
</div>
<script>
var c=document.getElementById("cvs");
var cxt=c.getContext("2d");
// 线条的绘制
cxt.beginPath();
cxt.lineWidth = 2;
cxt.strokeStyle="blue";
cxt.moveTo(70,120);
cxt.lineTo(70,320);
cxt.lineTo(260,320);
cxt.lineTo(70,121);
cxt.stroke();
cxt.closePath();
// 圆形的绘制
cxt.beginPath();
cxt,lineWidth = 5;
cxt.strokeStyle="green";
cxt.arc(130,260,25,0,Math.PI*2,true);
cxt.stroke();
cxt.closePath();
// 文字的绘制
cxt.beginPath();
cxt.font ="25px 黑体";
cxt.fillStyle = "red";
cxt.fillText("绘制教学工具",70,380,200);
cxt.closePath();
</script>
</body>
</html>