模块08绘制图形电子课件 HTML5网页设计.pptx

《模块08绘制图形电子课件 HTML5网页设计.pptx》由会员分享，可在线阅读，更多相关《模块08绘制图形电子课件 HTML5网页设计.pptx（77页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、模块八绘 制 图 形8.1canvas标签在canvas元素内绘制图形并不是用鼠标来作画。默认情况下，该矩形区域的宽度为300像素，高度为150像素，用户可以自定义具体的大小或设置canvas元素的相关特性。在页面中添加了该元素后，用户可以在其中添加图片、线条或文字，也可以加入高级动画或进行绘图设置。在HTML5中输入以下代码，就可以在页面中创建一块画布。说明：以上代码是使用width与height属性来自定义画布的宽度和高度，在绘制页面中显示一块300像素150像素的空白区域。8.1canvas标签【例8-1】创建简单的画布。例题8.1-创建简单的画布您的浏览器不支持 HTML5 canva

2、s 元素。将本例题在IE 11浏览器中运行，结果如图8-1所示。图8-1【例8-1】在IE浏览器中的运行结果8.1canvas标签8.1.1 利用canvas绘制图形的步骤canvas元素本身并不能实现图形绘制功能，绘制图形的工作是由JavaScript来完成的。使用JavaScript可以在canvas元素内部添加线条、图片和文字，也可以在其中绘画，还能够加入高级动画。(1)在HTML5页面中添加canvas元素，必须定义canvas元素的id属性值，以便进行调用。8.1canvas标签8.1.1 利用canvas绘制图形的步骤(3)通过canvas元素的getContext（）方法来获取其

3、上下文(context)，即创建context对象，以获取允许进行绘制的2D环境。var context=c.getContext(2d);(2)使用id寻找canvas元素。在JavaScript代码中使用document.getElementById等方法，利用先前在canvas元素中指定的id来寻找canvas。var c=document.getElementById(myCanvas);(4)使用JavaScript进行绘制。例如，使用以下代码可以绘制一个位于画布中央的矩形。context.fillStyle=#FF00FF;context.fillRect(50，25，100，50

4、);8.1canvas标签8.1.1 利用canvas绘制图形的步骤【例8-2】绘制一个位于画布中央的粉红色矩形。例题8.2您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.fillStyle=#FF00FF;ctx.fillRect(50，25，100，50);8.1canvas标签8.1.1 利用canvas绘制图形的步骤【例8-2】运行结果如图8-2所示。图8-2【例8-2】在IE浏览器中的运行结果8.1canvas标签8.1.2 支持canvas的浏

5、览器Internet Explorer 9及以上、Firefox 2.0及以上、Opera 9.0及以上、Chrome 4.0及以上和Safari 3.1及以上版本的浏览器支持canvas标签的属性及方法。需要注意的是，Internet Explorer 8 及更早版本的IE不支持元素。8.2绘制基本图形8.2.1 绘制直线moveTo()方法 1.moveTo()方法的作用是将光标移动到指定的坐标点(x，y)，绘制直线时以该点为起点。其语法如下。moveTo(x，y)lineTo()方法 2.lineTo()方法的作用是在moveTo()方法中指定的直线起点与lineTo()方法中指定的直线

6、终点之间绘制一条直线。其语法如下。lineTo(x，y)8.2绘制基本图形8.2.1 绘制直线【例8-3】绘制一条直线，定义开始坐标(0，0)和结束坐标(200，100)。例题8.3-绘制一条直线您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.moveTo(0，0);ctx.lineTo(200，100);ctx.stroke();8.2绘制基本图形8.2.1 绘制直线【例8-3】利用stroke()方法可实际地绘制出通过moveTo()和lineTo()

7、方法定义的路径，默认颜色是黑色。运行结果如图8-3所示。图8-3【例8-3】在IE浏览器中的运行结果8.2绘制基本图形8.2.1 绘制直线【例8-4】绘制一条红色折线。例题8.4-绘制一条红色折线您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.beginPath();ctx.moveTo(20，20);ctx.lineTo(20，100);ctx.lineTo(70，100);ctx.strokeStyle=red;ctx.stroke();8.2绘制基本

8、图形8.2.1 绘制直线【例8-4】HTML canvas strokeStyle 属性用于设置笔触的颜色、渐变或模式，见表8-1。表8-1 canvas strokeStyle属性运行结果如图8-4所示。图8-4【例8-4】在IE浏览器中的运行结果8.2绘制基本图形8.2.1 绘制直线closePath()方法 3.利用closePath()方法可从当前点到开始点之间绘制一条路径，使其成为封闭图形。fillStyle属性 4.fillStyle属性与strokeStyle 属性类似，都可以用于对图形添加颜色，它们对颜色的表示方式相同，但是fillStyle属性是对图形的内部填充颜色，而str

9、okeStyle 属性是对图形的边框添加颜色。fillStyle=colorstrokeStyle=color8.2绘制基本图形8.2.2 绘制矩形一般用rect()方法创建矩形。其语法格式如下。rect(x，y，width，height)参数说明见表8-2。表8-2 rect()方法参数说明8.2绘制基本图形8.2.2 绘制矩形【例8-5】绘制一个红色边框的矩形。例题8.5-绘制一个红色边框的矩形您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.strok

10、eStyle=#FF0000;ctx.strokeRect(20，20，150，100);8.2绘制基本图形8.2.2 绘制矩形【例8-5】运行结果如图8-5所示。图8-5【例8-5】在IE浏览器中的运行结果8.2绘制基本图形8.2.2 绘制矩形【例8-6】通过rect()方法来创建三个矩形。例题8.6-通过rect()方法来创建三个矩形您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);/红色矩形ctx.beginPath();ctx.lineWidth=6;ctx

11、.strokeStyle=red;ctx.rect(5，5，290，140);ctx.stroke();8.2绘制基本图形8.2.2 绘制矩形【例8-6】/绿色矩形ctx.beginPath();ctx.lineWidth=4;ctx.strokeStyle=green;ctx.rect(30，30，50，50);ctx.stroke();/蓝色矩形ctx.beginPath();ctx.lineWidth=10;ctx.strokeStyle=blue;ctx.rect(50，50，150，80);ctx.stroke();运行结果如图8-6所示。图8-6【例8-6】在IE浏览器中的运行结果

12、8.2绘制基本图形8.2.2 绘制矩形【例8-7】绘制一个渐变色的矩形。例题8.7-绘制一个渐变色的矩形您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);var gradient=ctx.createLinearGradient(0，0，170，0);gradient.addColorStop(0，magenta);gradient.addColorStop(0.5，blue);gradient.addColorStop(1.0，red);8.2绘制基本图形8.2.

13、2 绘制矩形【例8-7】绘制一个渐变色的矩形。/渐变填充ctx.strokeStyle=gradient;ctx.lineWidth=5;ctx.strokeRect(20，20，150，100);运行结果如图8-7所示。图8-7【例8-7】在IE浏览器中的运行结果8.2绘制基本图形8.2.3 绘制三角形【例8-8】绘制三角形。例题8.8-绘制三角形您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.beginPath();8.2绘制基本图形8.2.3 绘制三

14、角形【例8-8】运行结果如图8-8所示。ctx.moveTo(20，20);ctx.lineTo(20，100);ctx.lineTo(70，100);ctx.closePath();ctx.stroke();图8-8【例8-8】在IE浏览器中的运行结果8.2绘制基本图形8.2.3 绘制三角形【例8-9】绘制红色三角形。例题8.9-绘制红色三角形您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2d);ctx.beginPath();ctx.moveTo(20，20);ct

15、x.lineTo(20，100);ctx.lineTo(70，100);ctx.closePath();ctx.stroke();ctx.fillStyle=red;ctx.fill();8.2绘制基本图形8.2.3 绘制三角形【例8-9】运行结果如图8-9所示。图8-9【例8-9】在IE浏览器中的运行结果8.2绘制基本图形8.2.4 绘制圆形使用arc()方法绘制一个圆或创建弧/曲线(用于创建圆或部分圆)。在绘制圆形时，会用到beginPath、arc、closePath和fill四种方法。若需通过arc()方法来创建圆，则把起始角设置为0，结束角设置为2*Math.PI。使用stroke(

16、)或 fill()方法在画布上绘制实际的弧。如图8-10所示，右侧实心点表示起始点，中间实心点表示圆心，上方实心点表示结束点。图8-10 绘制的圆形8.2绘制基本图形8.2.4 绘制圆形arc()方法的语法如下。arc(x，y，radius，startAngle，endAngle，anticlockwise)arc()方法的参数见表8-3。表8-3 arc()方法的参数8.2绘制基本图形8.2.4 绘制圆形【例8-10】绘制圆形。例题8.10-绘制圆形您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx

17、=c.getContext(2d);ctx.beginPath();ctx.arc(95，50，40，0，2*Math.PI);ctx.stroke();8.2绘制基本图形8.2.4 绘制圆形【例8-10】运行结果如图8-11所示。图8-11【例8-10】在IE浏览器中的运行结果8.2绘制基本图形8.2.4 绘制圆形【例8-11】在300像素150像素大小的画布上绘制一个半径为50像素的粉色圆形。例题8.11-绘制粉色圆形您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);var ctx=c.getContext(2

18、d);ctx.fillStyle=#FF00FF;ctx.beginPath();ctx.arc(100，75，50，0，2*Math.PI，true);8.2绘制基本图形8.2.4 绘制圆形【例8-11】运行结果如图8-12所示。ctx.stroke();ctx.closePath();ctx.fill();图8-12【例8-11】在IE浏览器中的运行结果8.2绘制基本图形8.2.5 清空画布虽然在canvas中可以绘制一些图形，但有时可能需要清除这些图形，就像一些绘图软件中的橡皮擦工具的功能。使用clearRect()方法可清除指定的矩形区域内的所有图形，显示出画布的背景，该方法的用法如下

19、。context.clearRect(x，y，width，height);8.2绘制基本图形8.2.5 清空画布clearRect()方法的参数见表8-4。表8-4 clearRect()方法的参数8.2绘制基本图形8.2.5 清空画布【例8-12】在画布上绘制一段弧线，单击“清空画布”按钮，则会清除这段弧线。例题8.12-清空画布function clearMap()context.clearRect(0，0，300，200);您的浏览器不支持 HTML5 canvas 标签。var c=document.getElementById(myCanvas);8.2绘制基本图形8.2.5 清空画

20、布【例8-12】在画布上绘制一段弧线，单击“清空画布”按钮，则会清除这段弧线。var context=c.getContext(2d);context.strokeStyle=#ff00ff;context.beginPath();context.arc(200，150，100，-Math.PI*1/6，-Math.PI*5/6，true);context.stroke();8.2绘制基本图形8.2.5 清空画布【例8-12】运行上述程序后，绘制一条粉色弧线，如图8-13（a）所示；单击“清空画布”按钮后，弧线被删除，如图8-13（b）所示。（a）（b）图8-13【例8-12】在IE浏览器中的运行结果8.2绘制基本图形8.2.6 绘制图案【例8-13】绘制机器人图形。8.13.html代码如下。例题8.13-绘制机器人图形