使用canvas實現圖形變形效果

時間 2019-11-24

標籤使用 canvas 實現圖形變形效果简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>變形</title>
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			context.fillStyle = 'red';
			// 參數是x軸偏移量和y軸偏移量
			// context.translate(100,100);
			// 參數是x軸放大的倍數，y軸放大的倍數  若是大於1是放大，小於1是縮小
			// context.scale(0.5,1);
			// context.rotate(Math.PI/4);
			// context.rotate(-Math.PI/4);
			context.fillRect(0,0,200,200);
			context.fillRect(200,200,50,50);
			context.fillRect(200,0,50,50);
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>

相關標籤/搜索