【网站建设搭建】
【案例说明】本例中使用moveT00力法指定绘制直线的起点位置，使用lineTo()方法接临直线的终点坐标，最后使用stroke()方法完成绘图操作。
当用户需要绘制一个路径封闭的图形时，需要使用beginPath()方法初始化绘制路使用closePath()方法标记路径绘制操作结束。
beginPath()方法的语法格式为：
beginPath0
说明：beginPath()方法丢弃任何当前定义的路径并且开始一条新的路径，同时把当前的点设置为(0，0)。当第一次创建画布的环境时，beginPath()方法会被显式地调用。
closePath()方法的语法格式为：
closePath()
说明：closePath()方法用来关闭一条打开的子路径。如果画布的子路径是打开的，则closePath()方法通过添加一条线条连接当前点和子路径起始点来关闭它；如果子路径已经闭合了，则这个方法不做任何事情。一旦子路径闭合，就不能再为其添加更多的直线或曲线了。如果要继续向该路径添加直线或曲线，需要调用moveTo()方法开始一条新的子路径。
【案例s-ioi绘制一个三角形。
【案例展示】本例文件5-10.html在浏览器中的显示效果如图5-11所示。
【学习目标】掌握初始化路径和关闭路径的方法。
【知识要点】掌握绘制直线的相关方法和属性。
代码如下：
<fdoctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>绘制三角形</title>
<／head>
■
图5-11页面的显示效果
<body>
<canvas id=”myCanvas”width=”200”height=”100”style=”border:lpx solid #c3c3c3;”>
您的浏览器不支持canvas元素．
<／canvas>
<script type=”text/javascript”>
var c=document.getElementById(”myCanvas”);
var cxt-c．getContext(”2d”)；／／获取画布对象
cxt．strokeStyle=”#oooofr';／／获取画布上绘图的环境
本文地址:
http://www.yishenzhou.com/yes/post/346.html | 分类:企业网站设计 |
次阅读
