第5章--使用HTML5绘图ppt课件(全)

1、5.1标签设计网页离不开字体的设置，恰当的字体运用能够丰富网页的内容，美化文字的视觉效果。本节从文字的细节修饰着手，使读者轻松把握HTML的各种字体格式的变化，制作出更加精美的网页。了解标签标签有一个基于JavaScript的绘图API，而SVG和VML使用一个XML文档来描述绘图。Canvas与SVG和VML的实现方式不同，但在实现上可以相互模拟。标签有自己的优势，由于不存储文档对象，性能较好。但如果需要移除画布中的图形元素，往往需要擦掉绘图重新绘制它。在网页中插入canvas元素canvas元素是以标签的形式应用到HTML 5页面里的。在HTML5页面中标签的应用格式如下。使用标签实现绘图

2、的流程实现使用标签绘图的流程是先要获取canvas元素的对象，再获取一个绘图上下文，接下来就可以使用绘图API中丰富的功能了。1获取canvas对象2创建二维的绘图上下文对象3在Canvas上绘制文字绘制直线使用标签绘制直线，需要通过标签与JavaScript中的moveTo、lineTo和方法相结合。实战练习在网页中绘制直线绘制矩形绘图API为绘制矩形提供了两个专用的方法：strokeRect()和fillRect()，可分别用于绘制矩形边框和填充矩形区域。在绘制之前，往往需要先设置样式，然后才能进行绘制。实战练习在网页中绘制矩形5.2绘制基本图形使用HTML 5中新增的标签能够实现最简单直

3、接的绘图，也能够通过编写脚本实现极为复杂的应用。本节将向读者介绍如何使用标签与JavaScript脚本相结合实现一些简单的基本图形绘制。最终文件：光盘最终文件第5章5-2-1.html视频：光盘视频第5章5-2-1.swf最终文件：光盘最终文件第5章5-2-2.html视频：光盘视频第5章5-2-2.swf绘制圆形在canvas中，所有基本图形都是以路径为基础的，通常会调用linTo()、rect()、arc等方法来设置一些路径。在最后使用fill()或stroke()方法进行绘制边框或填充区域时，都是参照这个路径来进行的。实战练习在网页中绘制圆形绘制三角形三角形同样需要通过绘制路径的方法来实

4、现，了解了前面讲解的绘制图形的相关方法和属性，使用绘制路径的方法就能够自由地绘制出其他形状图形。实战练习在网页中绘制三角形图形组合通常，会把一个图形绘制在另一个图形之上，称之为图形组合。在canvas中，可通过globalCompositeOperation属性来设置如何在两个图形叠加的情况下组合颜色，最终文件：光盘最终文件第5章5-2-3.html视频：光盘视频第5章5-2-3.swf最终文件：光盘最终文件第5章5-2-4.html视频：光盘视频第5章5-2-4.swf在实际的绘图中，绘制曲线是常用的一种绘图形式。在设置路径的时候，需要使用一些曲线方法来勾勒出曲线路径，以完成曲线的绘制。在c

5、anvas中，绘图API提供了多种曲线的绘制方法，主要的曲线绘制方法有arc()、arcTo()、quadraticCurveTo()和bezierCurveTo()。 5.3绘制曲线使用arc()方法在前面已经讲解了如何使用arc()方法绘制圆形，arc()方法是使用中心点和半径，为一个canvas对象的当前路径添加一条弧线。实战练习通过中心点和半径绘制弧线使用arcTo()方法arcTo()方法是使用切线的方法绘制弧线，使用两个目标点和一个半径，为当前的子路添加一条弧线。与arc()方法相比，同样是绘制弧线，绘制思路和侧重点不同。实战练习通过辅助线绘制弧线最终文件：光盘最终文件第5章5-3

6、-1.html视频：光盘视频第5章5-3-1.swf最终文件：光盘最终文件第5章5-3-2.html视频：光盘视频第5章5-3-2.swf使用quadraticCurveTo()方法二次样条曲线是曲线的一种，canvas绘图API专门提供了此曲线的绘制方法。quadraticCurveTo()方法为当前的子路径添加一条二次样条曲线。实战练习绘制二次样条曲线使用bezierCurveTo()方法canvas绘图API也提供了贝赛尔曲线的绘制方法bezierCurveTo()，贝赛尔曲线是应用于二维图形应用程序中的数学曲线。与二次样条曲线相比，贝赛尔曲线使用了两个控制点，从而可以创建更复杂的曲线图

7、形。实战练习绘制贝赛尔曲线最终文件：光盘最终文件第5章5-3-3.html视频：光盘视频第5章5-3-3.swf最终文件：光盘最终文件第5章5-3-4.html视频：光盘视频第5章5-3-4.swf使用HTML 5中新增的标签除了可以绘制基本的图形以外，还可以绘制出文字的效果，在本节中将向读者介绍如何使用标签与JavaScript脚本相结合在网页中绘制文字效果。5.4绘制文本使用文本通过标签，可以使用填充的方法绘制文本，也可以使用描边的方法绘制文本，在绘制文本之前，还可以设置文字的字体样式和对齐方式。绘制文本有两种方法，一种是填充绘制方法fillText()和描边绘制方法strokeText(

8、)。实战练习在网页中绘制文字获取文字宽度绘图API提供了获取绘制文本宽度的方法，measureText()方法就是用来获取文本宽度的。实战练习获取所绘制文字的宽度最终文件：光盘最终文件第5章5-4-1.html视频：光盘视频第5章5-4-1.swf最终文件：光盘最终文件第5章5-4-2.html视频：光盘视频第5章5-4-2.swf创建对象阴影阴影效果可以增加图像的立体感，为所绘制的图形或文字添加阴影效果，可以利用绘图API提供的绘制阴影的属性。阴影属性不会单独去绘制阴影，只需要在绘制任何图形或文字之前，添加阴影属性，就能绘制出带有阴影效果的图形或文字。实战练习在网页中绘制文字并添加阴影最终文

9、件：光盘最终文件第5章5-4-3.html视频：光盘视频第5章5-4-3.swf有时候，可能需要借助一些图片素材，使绘图更加灵活和方便。在canvas中，绘图API已经提供了插入图像的方法，只需要几行代码就能将图像绘制到画布上。5.5图像的绘制与裁切绘制线性渐变使用渐变需要三个步骤：首先是创建渐变对象；其次是设置渐变颜色和过渡方式；最后将渐变对象赋值给填充样式或描边样式 。线性渐变是指起始点和结束点之间线性的内插颜色值。绘图API提供的创建线性渐变的方法是createLinearGradient()。实战练习在网页中绘制矩形并填充线性渐变绘制径向渐变径向渐变是指两个指定圆的圆周之间放射性地插颜

10、色值。绘图API提供的创建线性渐变的方法是createRadialGradient() 。 实战练习在网页中绘制圆形并填充径向渐变最终文件：光盘最终文件第5章5-5-1.html视频：光盘视频第5章5-5-1.swf最终文件：光盘最终文件第5章5-5-2.html视频：光盘视频第5章5-5-2.swf绘制图像使用drawImage()方法可以将图像添加到canvas画布中，即绘制一幅图像，有3种使用方法 。实战练习使用canvas元素绘制图像裁切区域在路径绘图中使用了两种绘图方法，即用于绘制线条的stroke()方法和用于填充区域的fill()方法。关于路径的处理，还有一种方法叫做裁切方法clip()。 实战练习在网页中实现圆形图像效果最终文件：光盘最终文件第5章5-5-3.html视频：光盘视频第5章5-5-3.swf最终文件：光盘最