【網(wǎng)站建設(shè)搭建】
【案例說明】本例中使用moveT00力法指定繪制直線的起點(diǎn)位置,使用lineTo()方法接臨直線的終點(diǎn)坐標(biāo),最后使用stroke()方法完成繪圖操作。
當(dāng)用戶需要繪制一個(gè)路徑封閉的圖形時(shí),需要使用beginPath()方法初始化繪制路使用closePath()方法標(biāo)記路徑繪制操作結(jié)束。
beginPath()方法的語(yǔ)法格式為:
beginPath0
說明:beginPath()方法丟棄任何當(dāng)前定義的路徑并且開始一條新的路徑,同時(shí)把當(dāng)前的點(diǎn)設(shè)置為(0,0)。當(dāng)?shù)谝淮蝿?chuàng)建畫布的環(huán)境時(shí),beginPath()方法會(huì)被顯式地調(diào)用。
closePath()方法的語(yǔ)法格式為:
closePath()
說明:closePath()方法用來關(guān)閉一條打開的子路徑。如果畫布的子路徑是打開的,則closePath()方法通過添加一條線條連接當(dāng)前點(diǎn)和子路徑起始點(diǎn)來關(guān)閉它;如果子路徑已經(jīng)閉合了,則這個(gè)方法不做任何事情。一旦子路徑閉合,就不能再為其添加更多的直線或曲線了。如果要繼續(xù)向該路徑添加直線或曲線,需要調(diào)用moveTo()方法開始一條新的子路徑。
【案例s-ioi繪制一個(gè)三角形。
【案例展示】本例文件5-10.html在瀏覽器中的顯示效果如圖5-11所示。
【學(xué)習(xí)目標(biāo)】掌握初始化路徑和關(guān)閉路徑的方法。
【知識(shí)要點(diǎn)】掌握繪制直線的相關(guān)方法和屬性。
代碼如下:
<fdoctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>繪制三角形</title>
</head>
■
圖5-11頁(yè)面的顯示效果
<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”);//獲取畫布對(duì)象
cxt.strokeStyle=”#oooofr';//獲取畫布上繪圖的環(huán)境