河南中医药大学：《Web交互开发》实验指导_09.实验九：绘图[JH-2018版]

《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)绘制半圆形,如图9-1所示。 图9-1半圆形的绘制 (2)请完成以下任务 任务一:编写代码,绘制如图9-1所示的半圆图案(10分) 本讲共计3页当前第1页

《Web 交互开发》实验教学指导 / 实验九 ：绘图 本讲共计 3 页 | 当前第 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）绘制半圆形，如图 9-1 所示。 （2）请完成以下任务： 任务一：编写代码，绘制如图 9-1 所示的半圆图案（10 分） 图 9-1 半圆形的绘制

《Web交互开发》实验教学指导/实验九:绘 2 要求 请将上述任务的操作方法,填写到实验报告册中。 渐变文字 (1)文字显示如图9-2所示,完成渐变文字的编写如图9-3 我喜欢Web前端我喜欢Web前端 图9-2 fullText字体 图93渐变字体 (3)请完成下面的任务 任务一:编写代码,实现如图92和9-3所示字体效果。(10分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 、图像的裁剪 (1)图像裁剪效果如图9-4所示。 图9-4图像裁剪 (3)请完成下面的任务: 任务一:编写代码,实现如图94所示的图像裁剪效果(20分) 要求 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、风车动画的实现。 (1)风车效果如图9-5所示。 本讲共计3页|当前第2页

《Web 交互开发》实验教学指导 / 实验九 ：绘图 本讲共计 3 页 | 当前第 2 页 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、渐变文字 （1）文字显示如图 9-2 所示，完成渐变文字的编写如图 9-3。 （3）请完成下面的任务： 任务一：编写代码，实现如图 9-2 和 9-3 所示字体效果。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、图像的裁剪 （1）图像裁剪效果如图 9-4 所示。 （3）请完成下面的任务： 任务一：编写代码，实现如图 9-4 所示的图像裁剪效果（20 分）。 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、风车动画的实现。 （1）风车效果如图 9-5 所示。 图 9-4 图像裁剪 图 9-2 fillText 字体 图 9-3 渐变字体

《Web交互开发》实验教学指导/实验九:绘图 图9-5风车效果 (2)完成下述任务。 任务一:编写代码实现如图9-5所示的风车效果,并且该风车能够转动(10分) 要求: 请将完成上述任务的步骤,填写到实验报告册中 2、图文混排 (1)使用 canvas实现图文混排,效果如图9-6所示。 小朋友观看长颈鹿 大家很开心 图9-6图文混排 (2)完成下述任务 任务一:编写代码实现图片的绘制。(5分) 任务二:编写代码实现文字的绘制。(5分) 七、思考及问答(20分) 1、属性 lineJoin的作用是什么,可以带有的属性值分别是什么?(5分) 2、使用 canvas能在网页中绘制虚线么?使用什么方法(5分) 3、arc与 arcTo方法有什么不同?(5分) 4、使用什么方法可以实现图像平铺?(5分) 本讲共计3页|当前第3页

《Web 交互开发》实验教学指导 / 实验九 ：绘图 本讲共计 3 页 | 当前第 3 页 （2）完成下述任务。 任务一：编写代码实现如图 9-5 所示的风车效果，并且该风车能够转动（10 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 2、图文混排 （1）使用 canvas 实现图文混排，效果如图 9-6 所示。 （2）完成下述任务。 任务一：编写代码实现图片的绘制。（5 分） 任务二：编写代码实现文字的绘制。（5 分） 七、思考及问答（20 分） 1、属性 lineJoin 的作用是什么，可以带有的属性值分别是什么？（5 分） 2、使用 canvas 能在网页中绘制虚线么？使用什么方法（5 分） 3、arc 与 arcTo 方法有什么不同？（5 分） 4、使用什么方法可以实现图像平铺？（5 分） 图 9-5 风车效果 图 9-6 图文混排