正在加载图片...
《Web交互开发》实验教学指导/实验八:绘图 <meta charset="utf-8"> <canvas id=canvas"width="800"height=600"><canvas> <script type="text/javascript"> 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)部分代码如下所示 <script type="text/javascript"> 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 页 <meta charset="utf-8"> </head> <body> <canvas id="canvas" width="800" height="600"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); ctx.fillStyle='#00ffff' ctx.font = '80px yahei'; ctx.fillText('我喜欢 Web 前端', 100, 100); </script> </body> （3）请完成下面的任务： 任务一：依据给出的 fillText 字体，编写代码，实现渐变字体效果。（7 分） 任务二：fillText（）方法实现的字体与 strokeText（）方法实现的字体的区别？（3 分） 任务三：渐变分为几种类型？分别用的方法是什么。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、图像的裁剪 （1）图像裁剪效果如图 8-3 所示。 （2）部分代码如下所示： <script type="text/javascript"> 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 图像裁剪