[html]
<!DOCTYPE HTML><!– HTML5 宣告 很重要別漏掉–>
<html>
<head>
<style>
body {
margin: 10px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="canvas1" width="500" height="500" style="border:1px solid #000000;"></canvas>
<!– 建立一張 500 x 500 的畫布 加上邊框 以利確認位置及比例 –>
<script>
var canvas = document.getElementById(‘canvas1’);
var context = canvas.getContext(‘2d’);
var centerX = canvas.width / 2;//中心圓的x坐標
var centerY = canvas.height / 2;//中心圓的y坐標
var radius = 249;//半徑
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);//畫圓 (中心圓的x坐標,中心圓的y坐標,半徑,起始角3點鐘方向算起為0, 結束角,false 順時針 true 逆時針)
context.fillStyle = ‘green’;//填滿的顏色
context.fill();//將內容填滿
context.lineWidth = 2;//邊線寬度
context.strokeStyle = ‘#000000’;//邊線顏色
context.stroke();
</script>
</body>
</html>
[/html]
[ HTML5 Canvas] – 教學 畫圓
評等結果
點擊便能為這篇文章進行評等！
[評等總次數: 0，平均評等: 0]
3M 日本原裝進口 速效型 防水噴霧 170ml 衣物 鞋子 皮革 透氣 防水 團購 
我最牛-綜合牛角酥餅乾 
味丹 隨緣 鮮蔬百匯/素肉骨茶/素魷魚羹麵/韓式泡菜/麻辣燙湯麵 (5包/袋) 素食 全素 泡麵 
垃圾桶 家用 客廳 臥室 辦公室 衛生間 大容量 高顏值 創意 收納 垃圾 評等結果
點擊便能為這篇文章進行評等！
[評等總次數: 0，平均評等: 0]