《Web交互开发》实验教学指导/实验八:绘图 《Web交互开发》实验教学指导 实验八:绘图 、实验目的(5分) 1、掌握 canvas绘图的基本概念; 2、掌握使用路径绘制多边形和圆形的方法 3、掌握图形渐变的绘制方法 4、掌握绘制文字的方法 5、掌握在画布中使用图像的方法 二、实验环境(5分) 1、 Windows xP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 、实验要求(5分) 1、实现简单留言版的管理 2、完成渐变的文字 3、完成页面的重定向问题; 四、实验原理(5分) 1、 Canvas绘制路径的方法 2、图形渐变的绘制原理 3、文字的绘制原理; 4、画布中图像的使用方法。 五、实验步骤(40分) 1、绘制五角星和圆形。 (1)绘制五角星和圆形,如图8-1-1和8-1-2所示。 图8-1-2半圆形的绘制 图8-1-1五角星 本讲共计6页|当前第1页
《Web 交互开发》实验教学指导 / 实验八 ：绘图 本讲共计 6 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验八：绘图 一、实验目的（5 分） 1、掌握 canvas 绘图的基本概念； 2、掌握使用路径绘制多边形和圆形的方法； 3、掌握图形渐变的绘制方法； 4、掌握绘制文字的方法； 5、掌握在画布中使用图像的方法。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、实现简单留言版的管理； 2、完成渐变的文字； 3、完成页面的重定向问题； 四、实验原理（5 分） 1、Canvas 绘制路径的方法； 2、图形渐变的绘制原理； 3、文字的绘制原理； 4、画布中图像的使用方法。 五、实验步骤（40 分） 1、绘制五角星和圆形。 （1）绘制五角星和圆形，如图 8-1-1 和 8-1-2 所示。 图 8-1-1 五角星 图 8-1-2 半圆形的绘制
《Web交互开发》实验教学指导/实验八:绘 2 (2)部分代码如下: var canvas=document. get Element Byld "canvas") var context=canvas. get Context("2d"); context. fillStyle="#F6F152' context. stroke Style="#F5270B" context. beginPatho ∥设置是个顶点的坐标,根据顶点制定路径 context. line To(Math. cos((18+1*72)180*Math. Pl)*200+230 th. sin(18+i*72/180° Math. Pl)*200+230) context. line To(Math. cos((54+1*72)180*Math. PD)*80+230 Math. sin(54+i*72)/180* Math. Pl)*80+230) context. closePatho ∥设置边框样式以及填充颜色 ontext line Width="3 ontext fillo context. stroke (3)请完成以下任务: 任务一:上述代码绘制出了是五角星,请编写五角星的阴影。(5分) 任务二:编写代码,绘制如图8-1-2所示的半圆图案(5分) 任务三: move Too方法与 line Too方法分别表示什么意思。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、渐变文字 (1)文字显示如图8-2-1所示,完成渐变文字的编写如图8-22 我喜欢Web前端我喜欢Web前端 图8-2-1 fullText字体 图8-22渐变字体 (2)部分如下所示 渐变文字</ttle 本讲共计6页当前第2页
《Web 交互开发》实验教学指导 / 实验八 ：绘图 本讲共计 6 页 | 当前第 2 页 （2）部分代码如下： var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#F6F152"; context.strokeStyle = "#F5270B"; context.beginPath(); //设置是个顶点的坐标，根据顶点制定路径 for (var i = 0; i （3）请完成以下任务： 任务一：上述代码绘制出了是五角星，请编写五角星的阴影。（5 分） 任务二：编写代码，绘制如图 8-1-2 所示的半圆图案（5 分） 任务三：moveTo()方法与 lineTo()方法分别表示什么意思。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、渐变文字 （1）文字显示如图 8-2-1 所示，完成渐变文字的编写如图 8-2-2。 （2）部分如下所示： 渐变文字 图 8-2-1 fillText 字体 图 8-2-2 渐变字体
《Web交互开发》实验教学指导/实验八:绘图 var canvas =document. get ElementByld(canvas) tx=canvas. getContext(2d); ctx font=80px yahei ctx. fullText((我喜欢Web前端',100,100) (3)请完成下面的任务 任务一:依据给出的 fullText字体,编写代码,实现渐变字体效果。(7分) 任务二: fullText()方法实现的字体与 stroke Text()方法实现的字体的区别?(3分) 任务三:渐变分为几种类型?分别用的方法是什么。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、图像的裁剪 (1)图像裁剪效果如图8-3所示, 图8-3图像裁剪 (2)部分代码如下所示 var canvas=document. get Element Byldd'canvas') ctx= canvas. get Context(2d) var gr=ctx. createLinear Gradient(0, 400, 300,0) gr add Color Stop(0, rgb(0, 255, 255)) ctx fillRect(0, 0, 400, 300) 本讲共计6页|当前第3页
《Web 交互开发》实验教学指导 / 实验八 ：绘图 本讲共计 6 页 | 当前第 3 页 var canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); ctx.fillStyle='#00ffff' ctx.font = '80px yahei'; ctx.fillText('我喜欢 Web 前端', 100, 100); （3）请完成下面的任务： 任务一：依据给出的 fillText 字体，编写代码，实现渐变字体效果。（7 分） 任务二：fillText（）方法实现的字体与 strokeText（）方法实现的字体的区别？（3 分） 任务三：渐变分为几种类型？分别用的方法是什么。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、图像的裁剪 （1）图像裁剪效果如图 8-3 所示。 （2）部分代码如下所示： var canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); var gr=ctx.createLinearGradient(0,400,300,0); gr.addColorStop(0,'rgb(255,255,0)'); gr.addColorStop(0,'rgb(0,255,255)'); ctx.fillStyle=gr; ctx.fillRect(0,0,400,300); 图 8-3 图像裁剪
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 （3）请完成下面的任务： 任务一：使用 drawImage 绘制图像时，共有几种方法，分别带有的参数情况（5 分）。 任务二：简述上面程序的实现过程？（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、风车动画的实现。 （1）风车效果如图 8-4 所示
《Web交互开发》实验教学指导/实验八:绘图 图8-4风车效果 (2)完成下述任务。 任务一:代码 cxt clearrect00, WINDOW WIDTH WINDOW HEIGHT),是什么意思(3分) 任务二:代码 cxt rotate( num*Math. P80)是什么意思?(3分) 任务三:风车旋转的速度是多少?(2分) 任务四:风车弧度半径是多少。(2分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 2、图文混排 (1)使用 canvas实现图文混排,效果如图8-5所示 小朋友观看长颈鹿 大家很开心! 图8-5图文混排 (2)完成下述任务。 任务一:编写代码实现图片的绘制。(5分) 任务二:编写代码实现文字的绘制。(5分) 七、思考及问答(20分) 1、属性 linejoin的作用是什么,可以带有的属性值分别是什么?(5分) 本讲共计6页当前第5页
《Web 交互开发》实验教学指导 / 实验八 ：绘图 本讲共计 6 页 | 当前第 5 页 （2）完成下述任务。 任务一：代码 cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);是什么意思（3 分） 任务二：代码 cxt.rotate(num*Math.PI/180)是什么意思？（3 分） 任务三：风车旋转的速度是多少？（2 分） 任务四：风车弧度半径是多少。（2 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 2、图文混排 （1）使用 canvas 实现图文混排，效果如图 8-5 所示。 （2）完成下述任务。 任务一：编写代码实现图片的绘制。（5 分） 任务二：编写代码实现文字的绘制。（5 分） 七、思考及问答（20 分） 1、属性 lineJoin 的作用是什么，可以带有的属性值分别是什么？（5 分） 图 8-4 风车效果 图 8-5 图文混排
《Web交互开发》实验教学指导/实验八:绘图 6 2、使用 canvas能在网页中绘制虚线么?使用什么方法(5分) 3、arc与 arcTo方法有什么不同?(5分) 4、使用什么方法可以实现图像平铺?(5分) 本讲共计6页|当前第6页
《Web 交互开发》实验教学指导 / 实验八 ：绘图 本讲共计 6 页 | 当前第 6 页 2、使用 canvas 能在网页中绘制虚线么？使用什么方法（5 分） 3、arc 与 arcTo 方法有什么不同？（5 分） 4、使用什么方法可以实现图像平铺？（5 分）
