火龙果-html_5_canvas绘图要点.ppt

HTML 5 地图绘制 HTML 5 canvas HTML 5 规范引进了很多新特性，其中最令人期待的之一就是?canvas 元素。HTML 5 canvas 提供了通过?JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的API?提供图形绘制功能。大部分的浏览器都支持 2D canvas 上下文——包括?Opera ,?Firefox,?Konqueror?和Safari。而且某些版本的 Opera 还支持 3D canvas ，Firefox 也可以通过插件形式支持 3D canvas canvas 基础创建 canvas 的方法很简单，只需要在 HTML 页面中添加 canvas 元素： canvas 绘图方法要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById 函数找到 canvas元素，然后初始化上下文。之后可以使用上下文 API 绘制各种图形。 fillStyle?、?strokeStyle、clearRect 和?lineWidth?属性 其中， fillStyle?、?strokeStyle、clearRect 参数：（x,?y,?width,?height ）  路径通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。 插入图像drawImage 方法允许在 canvas 中插入其他图像。在 Opera 中可以在 canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数： 3个参数：最基本的 drawImage 使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。 5个参数：中级的 drawImage 使用方法，包括上面所述3个参数，加两个参数指明插入图像宽度和高度 (如果你想改变图像大小)。 9个参数：最复杂drawImage 杂使用方法，包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。 像素级操作2D Context API 提供了三个方法用于像素级操作：createImageData, getImageData, putImageData。ImageData对象保存了图像像素值。每个对象有三个属性:?width,?height?和data。data?属性类型为CanvasPixelArray，用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至 255，包括alpha在内)。像素的顺序从左至右，从上到下，按行存储。 通过 ImageData 可以完成很多功能 。例：简单的颜色反转滤镜 文字context 对象可以设置以下 text 属性： font：文字字体，同?CSS?font-family 属性 textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start. textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic. fillText 和 strokeText有两个方法可以绘制文字： fillText 和 strokeText。第一个绘制带?fillStyle?填充的文字，后者绘制只有?strokeStyle?边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。文字对齐属性影响文字与设置的(x,y) 坐标的相对位置。 在 canvas 中绘制”hello world” 文字 ： 阴影（目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API ） shadowColor：阴影颜色。其值和 CSS 颜色值一致。 shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。 shadowOffsetX