使用canvas繪製樓梯（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.beginPath();
			context.moveTo(0,0);
			context.lineTo(100,0);
			context.lineTo(100,100);
			context.lineTo(200,100);
			context.lineTo(200,200);
			context.lineTo(300,200);
			context.lineTo(300,300);
			context.lineTo(400,300);
			context.lineTo(400,400);
			context.closePath();
			context.strokeStyle = 'pink';
			context.fillStyle = 'skyblue';
			context.lineWidth = 3;
			context.stroke();
			// context.fill();
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>

相關標籤/搜索