canvas繪製網狀圓圈程式碼例項

admin發表於2017-02-10
Canvas
分享一段程式碼例項，它實現了繪製網狀圓圈的效果。

並且具有動態效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas{
  position: absolute;
        top: 0;
        left : 0;
        -webkit-filter:drop-shadow(8px 8px 2px #000)
}
</style>
</head>
<body>
<canvas id="cvs" width="1000" height="1000"></canvas>
<script>
var canvas = window.cvs;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1.0; // 設定線寬
var angel = 0;
 
var
// 大圓半徑
  R = 210,
  // 小圓半徑
  r = 80,
  // 繪圖點與圓心距離
  d = 50,
  dr = R - r,
  times = R / r
  x0 = 220,
  y0 = 220,
 
 
  setInterval(function() {
    var y = y0 + dr * Math.sin(angel) + Math.sin(-angel / times) * d;
    var color = (~~(256 * y / 2 / R)).toString(16);
    ctx.strokeStyle = "#" + color + "0055";
    console.log("#" + color + "0055");
    ctx.beginPath();
    ctx.moveTo(x0 + dr * Math.cos(angel) + Math.cos(-angel / times) * d, y);
    angel += 0.1;
    ctx.lineTo(x0 + dr * Math.cos(angel) + Math.cos(-angel / times) * d, y0 + dr * Math.sin(angel) + Math.sin(-angel / times) * d);
    ctx.closePath();
    ctx.stroke();
  }, 20)
</script>
</body>
</html>

相關文章