canvas 繪製圓形

admin發表於2018-10-22
Canvas

本文介紹一下利用canvas繪製圓形圖案，越是規則的圖案越容易繪製。

canvas內建了arc方法實現此功能，的確非常輕鬆。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas{
  background-color: #ccc;
}  
</style>  
<script>
window.onload=function(){
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.arc(100, 100, 40, 0, 2 * Math.PI);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001400thggnnsfho8ewgfg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了一個比較原生態的原型，沒有填充，描邊也是預設的。

arc方法引數簡介如下：

（1）.第一個引數規定圓心x軸座標。

（2）.第二個引數規定圓心y軸座標。

（3）.第三個引數規定圓的半徑尺寸，單位是畫素。

（4）.第四個引數規定圓繪製的起始角度。

（5）.第五個引數規定圓繪製的結束角度。

（6）.第六個引數規定逆時針繪製還是順時針繪製。

具體用法可以參閱canvas arc()一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas{
  background-color: #ccc;
}  
</style>  
<script>
window.onload=function(){
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");
  ctx.arc(100, 100, 40, 0, 2 * Math.PI);
  ctx.lineWidth=5;
  ctx.fillStyle = "blue";
  ctx.strokeStyle = "red";
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001437fhw3wzl0glkcg4kl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼會繪製的圓形進行描邊和填充操作。

相關文章