html-3(5)
阿新 • • 發佈：2017-11-21
坐標 title button ont tex 放大 type click rec
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>變換坐標</title>
<script type="text/javascript">
function move(){
var canvas=document.getElementById("canvas1");
var context=canvas.getContext(‘2d‘);
context.fillStyle="#eeeeee";
context.fillRect(200,10,50,50);
context.translate(200,25);//平移
context.fillStyle="rgba(0,255,0,0.5)";
for(var i=0;i<50;i++){
context.translate(25,25);
context.scale(0.95,0.95);//放大縮小
context.rotate(Math.PI/10);//旋轉
context.fillRect(0,0,100,50);
}
}
</script>
</head>
<body>
<canvas id="canvas1" aligh="center" width="500" height="500"></canvas>
<input type="button" align="center" onClick="move()" value="點擊我變換坐標">
</body>
</html>
html-3(5)