通过代码示例跟我学html5相关技术——html5中的canvas标签及应用实例第3部分

通过代码示例跟我学html5相关技术——html5中的canvas标签及应用实例第3部分内容摘要：

nction() { for(var loopIndex = 0。 loopIndex 7。 loopIndex++){ 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权 所有，盗版必究 ， 14/29 页 14 (someOneImageTagObject,0 + loopIndex * 50, 0 + loopIndex * 25,100,100)。 } }。 } else { (39。 my_canvas39。 ). = 39。 none39。 (39。 nocanvas39。 ). = 39。 block39。 } }。 /script /head body section header h1HTML5 的 2D Canvas 图像示例 /h1 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的浏览器不支持 2D Canvas 相关的技术 /div /p /section /body /html 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权 所有，盗版必究 ， 15/29 页 15 图像局部裁剪及显示示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 图像示例页面 /title script type=text/javascript language= = function() { var canvas = (39。 my_canvas39。 )。 if() { var context = (2d)。 var someOneImageTagObject = new Image()。 =。 = function() { //首先调用该方法绘制原始图像 (someOneImageTagObject,0,0,100,100)。 //绘制将局部区域进行放大后的图像 (someOneImageTagObject,23,5,57,80,110,0,100,100)。 }。 } else { 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权 所有，盗版必究 ， 16/29 页 16 (39。 my_canvas39。 ). = 39。 none39。 (39。 nocanvas39。 ). = 39。 block39。 } }。 /script /head body section header h1HTML5 的 2D Canvas 图像示例 /h1 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的浏览器不支持 2D Canvas 相关的技术 /div /p /section /body /html 在水平和垂直方向重复图像填充 —— 位图填充 我们在游戏中经常会遇到图像平铺的需求，例如游戏中的砖头、地面、草丛和天空等，都可以通过平铺一张小图来实现。 这时可以使用 createPattern 方法创建一个重复图像的模型，并赋给 CanvasRenderingContext2D 的 fillStyle（作为几何形状的填充）或 StrokeStyle（作为几何形状的边框）属性，最后再使用 fillRect 方法将模型填充到画布。 （ 1） createPattern() 方法在指定的方向内重复指定的元素 元素可以是图片 、视频，或者其他 canvas 元素。 被重复的元素可用于绘制 /填充矩形、圆形或线条等等。 （ 2） createPattern() 方法的定义语法 (image,repeat|repeatx|repeaty|norepeat)。 该方法创建一个位图填充，并返回一个 CanvasPattern 对象。 其中的参数值的含义如下： 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权 所有，盗版必究 ， 17/29 页 17 1) image 规定要使用的图片、画布或视频元素。 2) repeat 默认。 该模式在水平和垂直方向重复。 3) repeatx 该模式只在水平方向 重复。 4) repeaty 该模式只在垂直方向重复。 5) norepeat 该模式只显示一次（不重复）。 （ 3）重复图像填充示例 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 charset=gb18030 titleHTML5 的 2D Canvas 图像示例页面 /title script type=text/javascript language= = function() { var canvas = (39。 my_canvas39。 )。 if() { var context = (2d)。 var someOneImageTagObject = new Image()。 =。 = function() { //创建填充样式，全方向（ X、 Y 两个方向）平铺 var repeatFillImagePattern = (someOneImageTagObject,39。 repeat39。 )。 //指定填充样式 = repeatFillImagePattern。 //填充画布 (0,0,800,600)。 }。 } else { (39。 my_canvas39。 ). = 39。 none39。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料 杨教授工作室，版权 所有，盗版必究 ， 18/29 页 18 (39。 nocanvas39。 ). = 39。 block39。 } }。 /script /head body section header h1HTML5 的 2D Canvas 图像示例 /h1 /header p canvas id=my_canvas width=600 height=500/canvas div id=nocanvas style=display:none你的浏览器不支持 2D Canvas 相关的技术 /div /p /section /body /html 使用 getImageData,putImageData 实现像素处理和实现图像滤镜效果 （ 1）获取图像像素的方法 (sx,sy,sw,sh) 该方法返回一个类型为 CanvasPixelArray 的 imagedata 对象，其中的 sx、 sy参数分别表示获取区域的起点横坐标、起点纵坐标，而 sw、 sh 参数分别表示所获取区域的宽度和高度。 （ 2 ） 更 新 图 像 像 素 的 方 法(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]) 其中的 imagedata（类型为 CanvasPixelArray）为像素数组，用于储存 width*height*4 个像素值。 每一个像素有 RGB 值和透明度 alpha 值（其值为 0 至 255，包括 alpha 在内 !），像素的顺序从左至右，从上到下，按行存储。 而其中的 dx、 dy分别表示重绘图像的起点横坐标、起点纵坐标， irtyX、 dirtyY、 dirtyWidth、dirtyHeight 分别为起点横坐标、起点纵坐标、宽度和高度。 （ 3）示例。