移动商务网页设计与制作教学课件作者魏利华第8章用html5绘制图形.pptVIP

８.７　组合多个图形 上一页 下一页 返回 ８.７　组合多个图形 上一页 下一页 返回 ８.７　组合多个图形 上一页 下一页 返回 ８.７　组合多个图形 ｊｓ函数负责响应下拉列表的ｏｎｃｈａｎｇｅ事件，从而在ｃａｎｖａｓ上画图，它先绘制原图形（ｄｅｓｔｉｎａｔｉｏｎ，在这里是一个蓝色正方形），然后取得用户选择的组合方式，再根据此方式画出新图形（ｓｏｕｒｃｅ，在这里是一个红色的圆）： 可以根据当前用户的选择来显示不同结果：这里的ｓｏｕｒｃｅ是红色的圆（新图形），ｄｅｓｔｉｎａｔｉｏｎ是蓝色正方形（旧图形），如图８.２１所示。 上一页 返回 ８.８　小结 本章主要介绍ＨＴＭＬ５中的画布———ｃａｎｖａｓＡＰＩ，这是一个在网页上画图的编程接口。本章介绍如何使用ｃａｎｖａｓＡＰＩ绘制各种图形，并在讲解实例的同时对绘制中应用到的各种属性进行了详细的阐述。在讲解完绘制图形以后，本章继续讲解了如何在画布中使用图像。希望读者能了解并熟练掌握ＨＴＭＬ５新增的ｃａｎｖａｓ元素，以此制作出更加丰富多彩、赏心悦目的Ｗｅｂ页面。 返回 图８.１　ｃａｎｖａｓ在页面上的显示效果 返回 图８.３在ｃａｎｖａｓ画布上画矩形 返回 图８.４　在ｃａｎｖａｓ画布上画带边框的矩形 返回 图８.５在ｃａｎｖａｓ画布上画圆形 返回 图８.６　使用路径绘制的火柴人 返回 图８.７　bezierCurve与quadraticC