HTML5 繪制圖像縮放對象

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

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

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

【例題】縮放對象

代碼如下：<!DOCTYFE html>

<html>

<head>

<title>Document</title>

<style>

canvas{

border:2px solid red;

}

</style>

</head>

<body>

</body>

<script〉

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

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

var rectWidth = 150;

var rectHeight = 75;

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

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

//把圖像縮小成原來的一半

context.scale(1,0.5);

context.fillStyle="blue";

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

</script>

</html>

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

相關(guān)視頻回答

回復(fù)(0)

HTML5 繪制圖像 縮放對象