《HTML5与JavaScrip程序设计》项目九 HTML画布Canvas应用 教学课件.pptVIP

05思考与练习打开前端开发工具HBuilder，在项目subject09中新建一个HTML文件：exercise09-1.html。用学过的绘制基本图形的知识绘制一个nike的商标（其中有部分代码已经给出），最终显示效果如图9-7所示：图9-7nike商标项目九HTML5画布Canvas应用任务二Canvas绘制图片任务三Canvas其他方法01学习完基本图形绘制之后，小明觉得画布真的太有意思了。正好母亲节快到了，小明想要用画布为妈妈制作一张贺卡。小明了解到画布中还可以对图片进行美化。于是，小明决定将妈妈的照片裁剪成心形。本任务就让我们一起来了解一下怎样用画布将照片裁剪出想要的形状。完成任务任务描述能掌握绘制图片的方法。能了解方法中参数的用法和功能。会在画布中绘制图片，进行图片裁剪。能力目标知识目标学习目标思政目标遵规守纪，方能长远。友情为生活填色，为心灵筑巢03知识链接我们既然想将我们的图片载入到画布中，怎么做呢？我们先来差混构建一个Image对象。接下来就是添加图片的方法。这里一定要注意，我们的程序只是创建，加载图片，所以调用image时无需传入宽度和高度，这样创建的图像将会与src属性指定的图片保持相同的宽度和高度。我们可以使用onload去保证我们一定是在图片加载完成后再绘制。03知识链接添加图片的方法有三种，如表9-4所示：方法说明drawImage(图像,x,y)把图像绘制在x，y处。该方法不会对图片做任何缩放处理，绘制处理的图片保持原来的大小drawImage(图像,x,y,width,height)把图像绘制在x，y处。该方法会对图片进行缩放，绘制出来的宽度为width，高度为height。drawImage(图像,sx,sy,sw,sh,dx,dy,dw,dh)该方法将会从图像上“挖出”一块绘制到画布上。其中sx，sy两个参数控制从原图片上的哪一个位置开始挖去，sw，sh两个参数控制从原图片挖球的宽度和高度;dx，dy两个参数控制把挖取的图片绘制到画布上的哪个位置，而dw，dh则控制对绘制图片进行缩放，绘制出来的宽度是dw，高度dh表9-4添加图片的方法03知识链接在图像处理时，经常会将图像进行裁剪。利用画布也可以将图像进行裁剪，也就是将图像按照一定形状裁剪出来，这需要用到clip()方法。context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，也就是说，设定裁选区之后，无论在Canvas上绘制什么，只有落在裁选区内的那部分才能得以显示，其余都会被遮蔽掉。用的时候先创建裁剪区域，再绘制图像。04任务实施!DOCTYPEhtmlhtml head metacharset=utf-8 titletask09-2/title styletype=text/css canvas{ display:block; margin:0auto; background:pink } /style /head04任务实施body canvasid=my_canvaswidth=600height=600style=border:1pxsolidlightblue Yourbrowserdoesnotsupportthecanvaselement. /canvas scripttype=text/javascript varcanvas=document.getElementById(my_canvas); varctx=canvas.getContext(2d); window.onload=function(){ //以心形为裁剪区进行裁剪 heart(); ctx.clip(); //创建Image对象 varimg=newImage(); img.src=mother.jpeg; //将图像绘制在画布上 img.onload=function(){ ctx.drawImage(img,0,30); } }04任务实施functionheart(){ if(canvas.getContext){ ctx.beginPath(); //绘制贝济埃曲线（心形的左边一半） ctx.moveTo(300,450); ctx.bezier