【門戶網(wǎng)站建設(shè)的報(bào)價(jià)】
其中的參數(shù)含義如下。
image：要繪制的圖像。
x，y：要繪制圖像左上角的坐標(biāo)。
width，height：圖像實(shí)際繪制的尺寸，指定這些參數(shù)使得圖像可以縮放。
sourceX，sourceY：所要繪制圖像區(qū)域的左上角。
sourceWidth，sourceHeight：所要繪制圖像區(qū)域的大小。
destX, destY：所要繪制圖像區(qū)域的左上角的畫布坐標(biāo)。
destWidth，destHeight：所要繪制圖像區(qū)域的畫布大小。
【案例5-14】把一幅圖像放置到畫布上。
【案例展示】本例文件5-14.html在瀏覽器中的顯示效果如圖5-15所示。
【學(xué)習(xí)目標(biāo)】掌握繪制圖像的方法。
【知識(shí)要點(diǎn)】掌握繪制圖像的相關(guān)方法和屬性。
代碼如下：
<! doctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>繪制圖像<／title>
<／head>
圖5-15 頁(yè)面的顯示效果
<body>
<canvas id="myCanvas" width="200" height="100" style="border:lpx solid #c3c3c3;">
您的瀏覽器不支持canvas元素．
</canvas>
<script type="text/j avascript">
var c=document.getElementByld("myCanvas");
var cxt=c.getContextC'2d");
var img=new Image();
img.src="flower.png";
cxt.drawImage(img,0,0);
</script>
</body>
／／獲取畫布對(duì)象
／／獲取畫布上繪圖的環(huán)境
