位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > HTML > 問(wèn)題詳情

HTML5 繪制圖像 縮放對(duì)象

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-14

    在canvas中，也可以對(duì)canvas對(duì)象進(jìn)行縮放操作，主要利用scale(x,y)方法實(shí)現(xiàn)。

    scale這個(gè)方法有兩個(gè)參數(shù)，分別代表x軸和y軸兩個(gè)維度。每個(gè)參數(shù)在canvas顯示圖像的時(shí)候，向其傳遞在文本方向軸上圖像要縮放的量。下面通過(guò)一個(gè)簡(jiǎn)單的實(shí)例來(lái)展示canvas的縮放功能。

【例題】縮放對(duì)象

代碼如下：<!DOCTYFE html>

<html>

<head>

<meta charset="UTF - 8">

<title>Document</title>

<style> 

canvas{

border:2px solid red;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="300" height="150"></canvas>

</body>

<script〉

var myGanvas = document.getElementByld("myCanvas");

var context = myCanvas.getContext("2d");

var rectWidth = 150; 

var rectHeight = 75;

//把繪制的對(duì)象移動(dòng)到畫(huà)布的中心位置

context.translate(myGanvas.width/2,myGanvas.height/2);

//把圖像縮小成原來(lái)的一半

context.scale(1,0.5);

context.fillStyle="blue";

context.fillRect(-rectWidth/2,rectHeight/2,rectWidth,rectHeight);

</script>

</html>

在這個(gè)實(shí)例中，使用了translate方法。該方法用來(lái)制定新的原點(diǎn)坐標(biāo)，后續(xù)操作都是相對(duì)于新的原點(diǎn)坐標(biāo)來(lái)操作取值的。若要恢復(fù)原點(diǎn)坐標(biāo)，可以使用restoreO方法。

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部