2013年4月23日

HTML5之Canvas基础入门


HTML5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素。canvas 元素用于在网页上绘制图形。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。画布是一个矩形区域,您可以控制其每一像素。每一个 canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页),canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ,Firefox 也可以通过插件形式支持 3D canvas。
向HTML5 页面添加canvas 元素。规定元素的id、宽度和高度:
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
通过JavaScript 来绘制,canvas 元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript 内部完成:

<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用id 来寻找canvas 元素:var c=document.getElementById(“myCanvas”);
然后,创建context 对象:var cxt=c.getContext(“2d”);
getContext(“2d”) 对象是内建的HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法拥有参数(0,0,150,75)。意思是:在画布上绘制150×75 的矩形,从左上角开始(0,0)。
注:fillStyle方法是设置矩形的填充,颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla;fillRect可以绘制带填充的矩形,上述两个方法的参数相同:x, y, width, height。前两个参数设定 (x,y) 坐标,后两个参数设置矩形的高度和宽度。
   (1)实例 – 线条
通过指定从何处开始,在何处结束,来绘制一条线:
<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>
(2)实例 – 圆形
通过规定尺寸、颜色和位置,来绘制一个圆:
<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>
注:使用 beginPath()开始绘制,closePath() 结束自定义图形绘制。
(3)实例 – 渐变
使用您指定的颜色来绘制渐变背景:
<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,”#FF0000″);
grd.addColorStop(1,”#00FF00″);
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>
注:createLinearGradient 方法是创建线性颜色渐变,还有一个方法createRadialGradient是创建圆形颜色渐变,这两个方法都是CanvasGradient对象的 方法,创建颜色渐变对象后,使用addColorStop方法添加颜色中间值。
(4)实例 – 图像
把一幅图像放置到画布上:
<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
var img=new Image()
img.src=”flower.png”
cxt.drawImage(img,0,0);
</script>
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>
注:drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中绘制 SVG 图形。此方法比较复杂,可以有3个、5个或9个参数。
3个参数:最基本的 drawImage 使用方法。一个参数指定图像位置,另两个参数设置图像在 canvas中的位置。
5个参数:中级的 drawImage 使用方法,包括上面所述3个参数,加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。
9个参数:最复杂 drawImage 使用方法,包含上述5个参数外,另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。
Canvas 是 HTML 5最让人期待的特性之一,目前已获得大部分 Web 浏览器支持。Canvas 可以帮助创建游戏、增强图形用户界面。2D context API 提供大量图形绘制功能,希望你通过本文对 canvas 的基础学习,并且你有兴趣了解更多关于Canvas!

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》