Wdb交互开发》实验教学指导/实验八:绘图4 image, onload=functions drawing(ctx, image); function drawing(ctx, image) tx.drawlmage( image, -50,-150, 300, 300) function create Clip(ctx)4 var dy= tx begin Path for(vari=0;i<s;计+){ txline To(dx+x*s, dy+y*s); x. clipo (3)请完成下面的任务 任务一:使用 drawImage绘制图像时,共有几种方法,分别带有的参数情况(5分)。 任务二:简述上面程序的实现过程?(5分) 要求 请将上述任务的操作方法,填写到实验报告册中 六、自主实验步骤(20分) 1、风车动画的实现 (1)风车效果如图8-4所示 本讲共计6页|当前第4页《Web 交互开发》实验教学指导 / 实验八 ：绘图 本讲共计 6 页 | 当前第 4 页 image=new Image(); image.onload=function(){ drawImg(ctx,image); } image.src="1.jpg"; function drawImg(ctx,image){ createClip(ctx); ctx.drawImage(image,-50,-150,300,300); } function createClip(ctx){ var n=0; var dx=100; var dy=0; var s=150; ctx.beginPath(); ctx.translate(100,150); var x=Math.sin(0); var y=Math.cos(0); var dig=Math.PI/5*4; for(var i=0;i<5;i++){ var x=Math.sin(i*dig); var y=Math.cos(i*dig); ctx.lineTo(dx+x*s,dy+y*s); } ctx.clip(); } </script> （3）请完成下面的任务： 任务一：使用 drawImage 绘制图像时，共有几种方法，分别带有的参数情况（5 分）。 任务二：简述上面程序的实现过程？（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、风车动画的实现。 （1）风车效果如图 8-4 所示