10.2.4 绘制图形
【例10-8】绘制图像。页面中依次绘制了5幅图像，分别实现 了原图使绘制、图像缩小、图像裁剪、裁剪区域的放大和裁剪区域 的缩小效果。
习题10
1．使用HTML5拖放API实现购物车拖放效果，如图10-9所示。 2．使用canvas元素绘制圆饼图，如图10-10所示。 3．使用canvas元素绘制一个商标，如图10-11所示。 4．使用canvas元素绘制填充文字和轮廓文字，如图10-12所示。 5．使用canvas元素绘制一个径向渐变图形，如图10-13所示。
10.1.2 拖放事件
3．拖放事件的生命周期和执行过程 从用户在元素上单击鼠标左键开始拖放行为，到将该元素放 置到指定的目标区域中，每个事件的生命周期如表10-3所示。
10.1.3 数据传递对象dataTransfer
dataTransfer对象用于从被拖放元素向目标元素传递数据，提 供了许多属性和方法。 【例 10-1】拖放示例。用户拖动页面中图片放置到目标矩形中。
draggable属性设置为true时仅表示该元素允许拖放，但并不 能真正实现拖放，必须与JavaScript脚本结合使用才能实现拖放。
10.1.2 拖放事件
1．拖放元素事件 事件对象为被拖放元素，拖放元素事件如表10-1所示。
10.1.2 拖放事件
2．目标元素事件 事件对象为目标元素，目标元素事件如表10-2所示。
fillRect(x, y, weight, height);
（2）绘制矩形轮廓 strokeRect()方法用来绘制矩形的轮廓，语法格式为：
strokeRect(x, y, weight, height);
10.2.4 绘制图形
【例10-2】绘制填充的矩形和矩形轮廓。
