Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第10章 HTML5的API应用

高等学校规划教材Web前端开发实例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第10章HTML5的API应用目录10.1拖放API10.2绘图API10.1拖放API10.1.1draggable属性10.1.2拖放事件10.1.3数据传递对象dataTransfer10.1.1draggable属性 draggable属性设置元素是否可以被拖放，该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以拖放，否则不能拖放。 例如，设置一张图片可以被拖放，代码为：<imgsrc="images/logo.jpg"border="1"draggable="true"> draggable属性设置为true时仅表示该元素允许拖放，但并不能真正实现拖放，必须与JavaScript脚本结合使用才能实现拖放。10.1.2拖放事件 1．拖放元素事件 事件对象为被拖放元素，拖放元素事件如表10-1所示。10.1.2拖放事件 2．目标元素事件 事件对象为目标元素，目标元素事件如表10-2所示。10.1.2拖放事件 3．拖放事件的生命周期和执行过程 从用户在元素上单击鼠标左键开始拖放行为，到将该元素放置到指定的目标区域中，每个事件的生命周期如表10-3所示。10.1.3数据传递对象dataTransfer dataTransfer对象用于从被拖放元素向目标元素传递数据，提供了许多属性和方法。【例10-1】拖放示例。用户拖动页面中图片放置到目标矩形中。10.2绘图API10.2.1创建canvas元素10.2.2构建绘图环境10.2.3绘制图形的步骤10.2.4绘制图形10.2.1创建canvas元素 canvas元素的主要属性是画布宽度属性width和高度属性height，单位是像素。向页面中添加canvas元素的语法格式为：<canvasid="画布标识"width="画布宽度"height="画布高度">…</canvas> 如果不指定width和height属性值，则默认的画布宽度为300像素，高度为150像素。10.2.2构建绘图环境 大多数canvas绘图API都没有定义在canvas元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。getContext()方法返回一个用于在画布上绘图的环境。其语法格式为：canvas.getContext(contextID)10.2.2构建绘图环境 getContext("2d")对象的属性和方法，可用于画布上绘制文本、线条、矩形、圆形等。颜色、样式和阴影属性如表10-6所示。10.2.2构建绘图环境 渲染上下文对象的常用方法如表10-7所示。10.2.3绘制图形的步骤 在创建的canvas上，通过JavaScript绘制图形的步骤如下。 1）创建canvas对象。

2）创建context对象，如下面的代码：varctx=c.getContext("2d"); 3）绘制图形。调用context对象的属性和方法，绘制图形。10.2.4绘制图形 1．绘制矩形 （1）绘制填充的矩形 fillRect()方法用来绘制填充的矩形，语法格式为：fillRect(x,y,weight,height); （2）绘制矩形轮廓 strokeRect()方法用来绘制矩形的轮廓，语法格式为：strokeRect(x,y,weight,height);10.2.4绘制图形 【例10-2】绘制填充的矩形和矩形轮廓。10.2.4绘制图形 【例10-3】绘制填充的矩形和矩形轮廓。10.2.4绘制图形

2．绘制路径

（1）lineTo()方法

lineTo()方法用来绘制一条直线，语法格式为：lineTo(x,y)

（2）moveTo()方法

在绘制直线时，通常配合moveTo()方法设置绘制直线的当前位置并开始一条新的子路径，语法格式为：moveTo(x,y)10.2.4绘制图形

（3）绘制路径封闭的图形

当用户需要绘制一个路径封闭的图形时，需要使用beginPath()方法初始化绘制路径和closePath()方法标记路径绘制操作结束。beginPath()方法的语法格式为：beginPath()closePath()方法的语法格式为：closePath()10.2.4绘制图形

【例10-4】绘制路径。10.2.4绘制图形

3．绘制圆弧或圆

arc()方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧，语法格式为：arc(x,y,radius,startAngle,endAngle,counterclockwise)其中的参数含义如下。

x,y：描述弧的圆形的圆心坐标。

radius：描述弧的圆形的半径。10.2.4绘制图形

4．绘制文字

（1）绘制填充文字

fillText()方法用于以填充方式绘制字符串，语法格式为：fillText(text,x,y,[maxWidth])

（2）绘制轮廓文字

strokeText()方法用于轮廓方式绘制字符串，语法格式为：strokeText(text,x,y,[maxWidth])10.2.4绘制图形

【例10-6】绘制填充文字和轮廓文字。10.2.4绘制图形

5．绘制渐变

（1）绘制线性渐变

createLinearGradient()方法用于创建一条线性颜色渐变：createLinearGradient(xStart,yStart,xEnd,yEnd)

（2）绘制径向渐变createRadialGradient()方法用于创建一条放射颜色渐变：createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)10.2.4绘制图形

【例10-7】绘制线性渐变和径向渐变。10.2.4绘制图形

6．绘制图像

使用drawImage()方法在一个画布上绘制图像，格式如下。格式一：drawImage(image,x,y)格式二：drawImage(image,x,y,width,height)格式三：drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)10.2.4绘制图形

【例10-8】绘制图像。页面中依次绘制了5幅图像，分别实现了原图使绘制、图像缩小、图像裁剪、裁剪区域的放大和裁剪区域的缩小效果。习题101．使用