canvas旋轉核輻射危險警告標誌

admin發表於2018-01-10
Canvas
分享一段程式碼例項，它利用canvas實現了繪製旋轉的核輻射危險警告標誌。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
  background-color: #000;
  margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  //                ctx.clearRect(300,300,600,600);
  ctx.translate(300, 300);
  function scroll() {
 
    //第一個黃色的大圓
    ctx.beginPath();
    ctx.rotate(6 * Math.PI / 180);
    ctx.fillStyle = '#FDCD01';
    ctx.arc(0, 0, 200, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
 
    //第二個黑色的大圓
    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.arc(0, 0, 170, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
 
    //第三個黃色的圓
    ctx.beginPath();
    ctx.fillStyle = '#FDCD01';
    ctx.arc(0, 0, 140, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
 
    //第四個黑色的三個扇形圓
    //一個扇形
    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.arc(1, 1, 110, 1.82 * Math.PI, .18 * Math.PI, false);
    ctx.arc(1, 1, 0, 1.82 * Math.PI, .18 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
    //第二個扇形
    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.arc(1, 1, 110, 0.52 * Math.PI, .89 * Math.PI, false);
    ctx.arc(1, 1, 0, 0.52 * Math.PI, .89 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
    //第三個扇形
    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.arc(1, 1, 110, 1.18 * Math.PI, 1.52 * Math.PI, false);
    ctx.arc(1, 1, 0, 1.18 * Math.PI, 1.52 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
 
 
    //第五個黃色的小圓
    ctx.beginPath();
    ctx.fillStyle = '#FDCD01';
    ctx.arc(0, 0, 30, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
 
    //第六個黑色的小圓
    ctx.beginPath();
    ctx.fillStyle = '#000';
    ctx.arc(0, 0, 15, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.closePath();
 
  }
  setInterval(scroll, 50);
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

相關文章