《Web前端开发技术（》课件T_第六章.pptxVIP

第六章

JavaScript开发实例;6.1Canvas绘图开发实例

6.1.1定义canvas标签;【案例6.1】：创建一个画布（Canvas）

;6.1.2绘制Canvas路径

;【案例6.2】：使用moveTo与lineTo绘制复杂图形

;【案例6.3】：使用rect与stroke绘制Canvas矩形

;【案例6.4】：使用fillRect()绘制Canvas矩形;【案例6.5】：使用arc()绘制Canvas圆形;【案例6.5】：使用arc()绘制Canvas圆形;【案例6.6】：使用arc函数绘制复杂Canvas圆形;6.1.3绘制Canvas图片

无论开发的是应用程序还是游戏软件，都是离不开图片，没有图片就无法让整个页面漂亮起来。开发HTML5游戏的时候，游戏中的地图、背景、人物、物品等都是由图片组成的，所以图片的显示和操作都非常重要，本节主要使用CanvasdrawImage函数、getImageData和putImageData绘制图片，使用createImageData新建图片像素。

;【例6.7】使用drawImage()函数在画布上绘制图片

body

img标签：br/

imgsrc=images/image.jpg/img

br/Canvas画板：br/

canvasid=myCanvaswidth=400height=400

你的浏览器不支持HTML5

/canvas

scripttype=text/javascript

varc=document.getElementById(myCanvas);

varctx=c.getContext(2d);

varimage=newImage();

image.src=images/image.jpg;

image.onload=function(){

ctx.drawImage(image,10,10);

ctx.drawImage(image,110,10,110,110);

ctx.drawImage(image,10,10,50,50,210,10,150,150);

};

/script

/body

;drawImage()函数在Canvas画布上绘制图像、画布或视频，也能够绘制图像的某些部分，已经增加或减少图像的尺寸，对应的语法格式如表9.15到表9.17所示，参数如表9.18所示。

在画布上定位图像：

表drawImage()语法1

在画布上定位图像，并规定图像的宽度和高度：

表drawImage()语法2

剪切图像，并在画布上定位被剪切的部分：

表drawImage()语法3

;表drawImage()函数参数

;imgsrc=images/image.jpg/img

表示运行image.jpg原图用于CanvasdrawIamge()函数画图效果的对比;

ctx.drawImage(image,10,10);

表示从坐标(10,10)的位置绘制image.jpg图片；

ctx.drawImage(image,110,10,110,110);

表示从坐标(110,10)位置绘制整张image.jpg图片到长110、款110的矩??区域内，所以本例的运行效果会有一定的拉升感；

ctx.drawImage(image,10,10,50,50,210,10,150,150);

表示将image.jpg图片从(10,10)坐标位置截取(50,50)的宽度和高度，然后将截取到的图片从坐标(210,10)位置开始绘制，放到长110、宽110的矩形区域内。

;【程序运行效果】如图所示。

;【例6.8】Canvas开发实例-帧动画效果

1．构建基本窗口代码清单：

!DOCTYPEhtml

metacharset=utf-8/

styletype=text/css

body{text-align:center;}

#c1{border:1pxdottedblack}

/style

body

h2超级玛丽动画效果/h2

imgid=img1src=images/image.png/

inputid=btnGOtype=buttonvalue=开始/br

canvasid=c1width=320height=200/canvasbr

/body

/html

;2．构建超级玛丽动画效果：

script

varisAnimStart=false; //是否开始动画

varMarioMovie=null; //动画函数

varframen=0; //图片切割个数

varframes=[]