canvas旋转核辐射危险警告标志
分类：实例代码
canvas旋转核辐射危险警告标志属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它利用canvas实现了绘制旋转的核辐射危险警告标志。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
canvas旋转核辐射危险警告标志，这样的场景在实际项目中还是用的比较多的，关于canvas旋转核辐射危险警告标志就介绍到这了。