HTML5教程：画布Canvas基础知识讲解.docx

HTML5教程：画布Canvas基础知识讲解HTML5教程：画布Canvas基础知识讲解Canvas是HTML5最让人期待的特性之一，目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。下面YJBYS小编为大家带来画布Canvas基础知识，希望对大家学习有所帮助!HTML5规范引进了很多新特性，其中最令人期待的之一就是Canvas元素。HTML5Canvas提供了通过JavaScript绘制图形的方法，此方法使用简单但功能强大。每一个Canvas元素都有一个“上下文(context)”(想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个Canvas上下文，并通过不同的API提供图形绘制功能。大部分的浏览器都支持2DCanvas上下文——包括Opera，Firefox，Konqueror和Safari。而且某些版本的Opera还支持3DCanvas，Firefox也可以通过插件形式支持3DCanvas。本文介绍主要介绍2DCanvas基础以及如何使用基本Canvas函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解JavaScript基础知识。下面开始我们的讲解：canvas基础创建Canvas的方法很简单，只需要在HTML页面中添加元素就可以了：1<canvas id="myCanvas" width="300" height="300">2这是一个Canvas标签案例3</canvas>为了能在JavaScript中引用Canvas，最好给它设置ID;也需要给Canvas设定高度和宽度。要在Canvas画布中绘制图形需要使用JavaScript。首先通过getElementById函数找到Canvas元素，然后初始化上下文，之后可以使用上下文API绘制各种图形。下面的脚本可以在Canvas中绘制一个矩形：1var elem=document.getElementById('myCanvas');2if (elem&&elem.getContext){3var context=elem.getContext('2d');4if (context){5context.fillRect(0,0,150,100);6}7}可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。2DcontextAPI介绍了如何创建Canvas后，让我们来看看2DCanvasAPI，看看能用这些函数做些什么。在上面的例子中，我们展示了绘制矩形是多么简单，而通过fillStyle和strokeStyle属性可以更轻松的设置矩形的填充和线条。颜色值使用方法和CSS一样：十六进制数、rgb()、rgba()和hsla()。通过fillRect可以绘制带填充的矩形;使用strokeRect可以绘制只有边框没有填充的矩形。如果想清除部分Canvas可以使用clearRect。上述三个方法的参数相同：x,y,width,height。前两个参数设定(x,y)坐标，后两个参数设置矩形的高度和宽度。下面将是一个综合实例的JavaScript脚本：1context.fillStyle= '#00f';2context.strokeStyle= '#f00';3context.lineWidth=4;4context.fillRect(0,0,150,50);5context.strokeRect(0,60,150,50);6context.clearRect(30,25,90,60);7context.strokeRect(30,25,90,60);可以把上面代码放置在文档head部分中，或者放在外部JavaScript文件中。路径通过Canvas路径(path)可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用fill和stroke即可添加填充或者设置边框。调用closePath()结束自定义图形绘制。下面是一个绘制三角的案例的JavaScript脚本：1context.fillStyle= '#00f';2context.strokeStyle= '#f00';3context.lineWidth=4;4context.begi