正在加载图片...
《Web交互开发》实验教学指导/实验八:绘 2 (2)部分代码如下: <script type="text/javascript"> 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)部分如下所示 <IDOCTYPE html> <ttle>渐变文字</ttle 本讲共计6页当前第2页《Web 交互开发》实验教学指导 / 实验八 ：绘图 本讲共计 6 页 | 当前第 2 页 （2）部分代码如下： <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "#F6F152"; context.strokeStyle = "#F5270B"; context.beginPath(); //设置是个顶点的坐标，根据顶点制定路径 for (var i = 0; i < 5; i++) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+230, -Math.sin((18+i*72)/180*Math.PI)*200+230); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+230, -Math.sin((54+i*72)/180*Math.PI)*80+230); } context.closePath(); //设置边框样式以及填充颜色 context.lineWidth="3"; context.fill(); context.stroke(); </script> （3）请完成以下任务： 任务一：上述代码绘制出了是五角星，请编写五角星的阴影。（5 分） 任务二：编写代码，绘制如图 8-1-2 所示的半圆图案（5 分） 任务三：moveTo()方法与 lineTo()方法分别表示什么意思。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、渐变文字 （1）文字显示如图 8-2-1 所示，完成渐变文字的编写如图 8-2-2。 （2）部分如下所示： <!DOCTYPE html> <html> <head> <title>渐变文字</title> 图 8-2-1 fillText 字体 图 8-2-2 渐变字体