5.2 HTML5的图像及动画使用路径画图
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</canvas> <br> <button onclick="draw()">绘图</button> </fieldset> </html> 本例中使用循环语句绘制了多条贝塞尔曲线，由这些曲线组合而成一个图形。保存此段代 码并在浏览器中运行，得到的结果如图5-8所示。
图5-8 使用bezierCurveTo方法绘图
第5章 HTML5的图像及动画 5.1 canvas元素 5.2 使用路径画图
5.3 图形操作
5.4 图像操作 5.5 canvas其他操作 5.6 制作动画 5.7 上机实践——绘制时钟
5.2 使用路径画图
5.2.1 理解canvas的坐标系 canvas元素构建的画布是一个基于二维（x，y）的网格。坐标原点（0，0）位 于canvas的左上角。从原点沿x轴从左到右，取值依次递增；从原点沿y轴从上 到下，取值依次递增。canvas坐标系示意图如图5-3所示。
5.2.3 使用arc方法画弧 除了绘制直线以外，HTML5还支持绘制弧线。arc方法用于绘制弧形、圆形，该 方法的应用格式为 arc(x,y,radius,startAngle,endAngle,anticlockwise) 该方法的各个参数说明如下。 （1）x：表示绘制弧形曲线圆心的横坐标。 （2）y：表示绘制弧形曲线圆心的纵坐标。 （3）radius：表示绘制弧形曲线的半径，单位为像素。 （4）startAngle：表示绘制弧形曲线的起始弧度。 （5）endAngle：表示绘制弧形曲线的结束弧度。 （6）anticlockwise：表示绘制弧形曲线的方向，该参数为布尔型。当赋值为true 时，将按照逆时针方向绘制弧形；当赋值为false时，将按照顺时针方向绘制弧形。
图5-6 anticlockwise设置为true的绘图结果
图5-5中的弧形是以顺时针方向绘制的，图5-6中的弧形是以逆时针方向绘制的。比较这两个 结果我们发现，绘制弧形与绘制线条原理是相同的，也要定义一个绘制起点（起始弧度） 以及一个绘制终点（终止弧度）。只不过绘制线条的绘制轨迹是以中间点形式定义的，而 弧线的绘制轨迹则是由弧线圆心、半径以及绘制方向定义的。 如果我们将起始弧度定义为0，终止弧度定义为Math.PI/180*360，即Math.PI*2，就可以绘 制出一个闭合的弧线，也就构成了一个圆形。将图5-5对应代码中的drawArc方法修改为： function drawLine() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.arc(100,100,80,0,(Math.PI*2,true); context.stroke(); } 重新绘图后，将得到一个圆形，如图5-7所示。
startAngle与endAngle都是以x轴作为参照的。这两个参数用到的单位是弧度不 是度。度和弧度直接的转换关系为：弧度 = (Math.PI/180)*度。
下面我们将使用arc方法绘制一个弧形，示例代码如下。 <!DOCTYPE html> <html> <meta charset="gb2312" /> <script> function drawArc() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.arc(100,100,80,0,(Math.PI/180)*90,false); context.stroke(); } </script> <fieldset> <legend>使用arc绘制弧形</legend> <canvas id="myCanvas" width="200px" height="200px"> </canvas> <br> <button onclick="drawArc()">绘图</button> </fieldset> </html>
保存此段代码，并在浏览器中运行，当页面加载完毕后单击“绘图”按钮，得到 的结果如图5-4所示。
图5-4
使用moveTo、lineTo方法绘制直线
在这个例子中，我们首先使用moveTo方法设定起点坐标，然后多次使用lineTo方 法定义多个中间点坐标，最终绘制了如图5-4所示的折线。 此例中还用到了一个重要方法就是stroke方法，该方法是真正用于绘制线条的。 对于moveTo、lineTo及stroke这3个方法，可以简单理解为，moveTo方法和lineTo 方法用于定义即将绘制的图形轨迹，而stroke方法则是将定义好的轨迹在画布中 绘制并展示。
使用bezierCurveTo绘制图形的示例代码如下。 <!DOCTYPE html> <html> <meta charset="gb2312" /> <script> function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); for (var i = 100; i < 150; i++) { var x = Math.sin(i)*50; var y = Math.cos(i)*100; context.bezierCurveTo(i/100,i/100,x*x,y*y,x+y,x+y); } context.stroke(); } </script> <fieldset> <legend>使用bezierCurveTo绘制弧形</legend> <canvas id="myCanvas" width="500px" height="500px">
由于canvas是基于二维空间的，复杂的图形都是由简单的直线、曲线构成。而 所有简单的线条都是以路径为基础的，而路径又与坐标息息相关。因此，充 分理解canvas坐标系结构至关重要，是学习后续绘图的基础。
5.2.2 使用moveTo、lineTo画线 在HTML5中直线是最基本的图形，HTML5提供了moveTo方法和lineTo方法用来 绘制直线。 moveTo方法的应用格式为： moveTo(x,y) 该方法的作用是将光标移动至指定坐标，该坐标作为绘制图形的起点坐标。其中， 参数x代表起点的横坐标，参数y代表起点的纵坐标。 lineTo方法的应用格式为： lineTo(x,y) 该方法与moveTo方法结合使用，用于指定一个坐标作为绘制图形的终点坐标。其 中，参数x代表终点的横坐标，参数y代表终点的纵坐标。如果多次调用lineTo方 法，则可以定义多个中间点坐标作为线条轨迹。最终将绘制成一条由起点开始， 经过各个中间点的线条。该线条可能是直线也可能是折线，取决于lineTo所指定 的中间点坐标。 下面我们将使用moveTo以及lineTo方法绘制几条简单的线条。示例代码如下。 <!DOCTYPE html> <html> <meta charset="gb2312" /> <script>
function drawLine() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.moveTo(10,10); context.lineTo(10,100); context.lineTo(125,125); context.lineTo(150,175); context.stroke(); } </script> <fieldset> <legend>使用moveTo、lineTo绘制直线</legend> <canvas id="myCanvas" width="200px" height="200px"> </canvas> <br> <button onclick="drawLine()">绘图</button> </fieldset> </html>
图5-7 使用arc绘制圆形
5.2.4 绘制贝塞尔图形
除了前面介绍的绘制简单图形方法外，HTML5还提供了一些高级图形的绘制方法。例如使 用bezierCurveTo方法可以绘制三次贝塞尔曲线，使用quadraticCurveTo方法绘制二次贝塞尔 曲线，等等。 下面以bezierCurveTo为例介绍该方法的具体用法。bezierCurveTo方法的应用格式为： bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 各参数说明如下。 （1）cp1x：第一个控制点的横坐标。 （2）cp1y：第一个控制点的纵坐标。 （3）cp2x：第二个控制点的横坐标。 （4）cp2y：第二个控制点的纵坐标。 （5）x：贝塞尔曲线终点的横坐标。 （6）y：贝塞尔曲线终点的纵坐标。 贝塞尔曲线是依据四个位置任意的点坐标绘制出的一条光滑曲线，贝塞尔曲线的每 一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它是应用于二维 图形应用程序的数学曲线。曲线的定义有四个点：起始点、终止点（也称锚点）以 及两个相互分离的中间点。滑动两个中间点，贝塞尔曲线的形状会发生变化。
保存此段代码，并在浏览器中运行，当页面加载完毕后单击“绘图”按钮，得到的结果如 图5-5所示。
图5-5 使用arc方法绘制弧线 在这个例子中，我们使用arc方法定义了一个圆心坐标为源自文库50，50），半径为80像素，起始 角度为0，终止角度为90（在实际赋值参数时已转换为弧度），按照顺时针方向绘制的弧线 轨迹，并使用stroke方法完成绘图。 如果将anticlockwise参数值设置为true，其他参数不变，得到的绘图结果如图5-6所示。