HTML5 繪制圖像變換對(duì)象

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

canvas中的變換有很多種，如縮放、移動(dòng)、旋轉(zhuǎn)等。

在canvas中，旋轉(zhuǎn)主要用到的方法為「otate(angle)。angle為整數(shù)時(shí)，順時(shí)針旋轉(zhuǎn)；angle負(fù)數(shù)時(shí)，逆時(shí)針旋轉(zhuǎn)。

【例題】旋轉(zhuǎn)對(duì)象

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</body>

var myCanvas = document.getEleraentById("myCanvas");

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

//ob j.x/y為長方形在canvas中的位置

//ob j.width/height為長方形的寬局

var obj = {

x : 50,

y : 50，

width:200,

height:200

}

//畫出一個(gè)長方形

function rotate(){

context.clearRect(0,0,800,800);

context.filStyle = "blue";

context.rotate(Math.PI/20); //給出旋車專角度 context.strokeRect(obj.x,(obj.width,obj.width,obj.height):

context.fillRect(obj.x,obj.y,obj.width,obj.height);

}

rotate();

</script>

</htnil>

相關(guān)視頻回答

回復(fù)(0)

HTML5 繪制圖像 變換對(duì)象