html 5 canvas绘图

1、HTML 5 地图绘制地图绘制第七次汇报HTML 5 canvas HTML 5 规范引进了很多新特性，其中最令人期待的之规范引进了很多新特性，其中最令人期待的之一就是一就是 canvas 元素。元素。HTML 5 canvas 提供了通提供了通过过 JavaScript 绘制图形的方法，此方法使用简单但功能绘制图形的方法，此方法使用简单但功能强大。每一个强大。每一个canvas 元素都有一个元素都有一个”上下文上下文( context )” (想象成绘图板上的一页想象成绘图板上的一页)，在其中可以绘制任意图形。浏，在其中可以绘制任意图形。浏览器支持多个览器支持多个 canvas 上下文，并通

2、过不同的上下文，并通过不同的API 提供提供图形绘制功能。图形绘制功能。大部分的浏览器都支持大部分的浏览器都支持 2D canvas 上下文上下文包包括括 Opera , Firefox, Konqueror 和和Safari。而且某些版。而且某些版本的本的 Opera 还支持还支持 3D canvas ，Firefox 也可以通过插也可以通过插件形式支持件形式支持 3D canvas canvas 基础基础创建创建 canvas 的方法很简单，只需要在的方法很简单，只需要在 HTML 页面中添加页面中添加 元素：元素：canvas 绘图方法绘图方法要在画布中绘制图形需要使用要在画布中绘制图形

3、需要使用 JavaScript 。首先通过。首先通过 getElementById 函数找到函数找到 canvas元素，然后初始化上元素，然后初始化上下文。之后可以使用上下文下文。之后可以使用上下文 API 绘制各种图形。绘制各种图形。fillStyle 、 strokeStyle、clearRect 和和 lineWidth 属性属性 其中，其中， fillStyle 、 strokeStyle、clearRect 参参数：（数：（x, y, width, height ）路径路径通过通过 canvas 路径（路径（path）可以绘制任意）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和形状

4、。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用填充。创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后线和其他图形绘制你的图形。绘制完毕后调用调用 fill 和和 stroke 即可添加填充或者设置即可添加填充或者设置边框。调用边框。调用 closePath() 结束自定义图形结束自定义图形绘制。绘制。 插入图像插入图像drawImage 方法允许在方法允许在 canvas 中插入其他图像。在中插入其他图像。在 Opera 中可以在中可以在 canvas 中绘制中绘制 SVG 图形。此方法比

5、较图形。此方法比较复杂，可以有复杂，可以有3个、个、5个或个或9个参数：个参数：l3个参数：最基本的 drawImage 使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。l5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。l9个参数：最复杂drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。像素级操作像素级操作2D Context API 提供了三个方法用于像素级操提供了三个方法用于像素级操作：作：cre

6、ateImageData, getImageData, putImageData。ImageData对象保存了图像像素值。每个对象有对象保存了图像像素值。每个对象有三个属性三个属性: width, height 和和data。data 属性类属性类型为型为CanvasPixelArray，用于储存，用于储存width*height*4个像素值。每一个像素有个像素值。每一个像素有RGB值值和透明度和透明度alpha值值(其值为其值为 0 至至 255，包括，包括alpha在内在内)。像素的顺序从左至右，从上到下，按行。像素的顺序从左至右，从上到下，按行存储。存储。通过通过 ImageData 可

7、以完成很多功能可以完成很多功能 。例：。例：简单的颜色反转滤镜简单的颜色反转滤镜文字文字context 对象可以设置以下对象可以设置以下 text 属性：属性：lfont：文字字体，同 CSS font-family 属性ltextAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.ltextBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic.fillText 和和 strokeText有两

8、个方法可以绘制文字：有两个方法可以绘制文字： fillText 和和 strokeText。第一个绘制带。第一个绘制带 fillStyle 填充填充的文字，后者绘制只有的文字，后者绘制只有 strokeStyle 边框边框的文字。两者的参数相同：要绘制的文字的文字。两者的参数相同：要绘制的文字和文字的位置和文字的位置(x,y) 坐标。还有一个可选选坐标。还有一个可选选项项最大宽度。如果需要的话，浏览器最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。文字对会缩减文字以让它适应指定宽度。文字对齐属性影响文字与设置的齐属性影响文字与设置的(x,y) 坐标的相对坐标的相对位置。位置。 在在

9、 canvas 中绘制中绘制”hello world” 文字文字 ：阴影阴影（目前只有目前只有 Konqueror 和和 Firefox 3.1 nightly build 支支持持 Shadows API ）lshadowColor：阴影颜色。其值和 CSS 颜色值一致。lshadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。lshadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。颜色渐变颜色渐变除了除了 CSS 颜色，颜色， fillStyle 和和 strokeStyle 属性可以设置为属性可以设置为 CanvasGradient 对象。对象。通过通过 CanvasGradient可以为线条和填充可以为线条和填充使用颜色渐变。使用颜色渐变。欲创建欲创建 CanvasGradient 对象，可以使用对象，可以使用两个方法：两个方法：createLinearGradie