使用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(){
			// 獲取canvas
			var canvas = document.getElementById('canvas');
			// 獲取2d上下文
			var context = canvas.getContext('2d');
			// 設置樣式
			context.fillStyle = 'pink';
			context.strokeStyle = 'skyblue';
			// 設置線寬
			context.lineWidth = 3;
			// 繪製一個圓
			// 開始路徑
			context.beginPath();
			// 設置路徑
			// 參數：圓心座標x,y,半徑,開始弧度，結束弧度，是否逆時針繪製   弧度：Math.PI 180度
			// context.arc(100,100,50,0,Math.PI*2);
			// context.arc(100,100,50,0,Math.PI);
			// context.arc(100,100,50,0,Math.PI/2,true);
			context.arc(100,100,50,0,Math.PI/4,true);
			// 結束路徑
			context.closePath();
			// 繪製
			// context.fill();
			context.stroke();
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px">
		瀏覽器不支持
	</canvas>
</body>
</html>

相關標籤/搜索