HTML5 Canvas 绘制螺旋线【每日一段代码30】
<!DOCTYPE html>
<html>
<head>
<title>绘制螺旋线</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var radius = 0;
var angle = 0;
context.lineWidth = 10;
context.strokeStyle="#0096FF";
context.beginPath();
context.moveTo(canvas.width/2,canvas.height/2);
for (var n=0; n<150; n++)
{
radius+=0.75;
angle+=(Math.PI*2)/50;
var x=canvas.width/2+radius*Math.cos(angle);
var y=canvas.height/2+radius*Math.sin(angle);
context.lineTo(x,y);
}
context.stroke();
}
</script>
</head>
<body style="margin:100px 50px;">
<canvas id="myCanvas" width="600" height="250" style="border:solid 2px #06f;"></canvas>
</body>
</html>
实例来自网络。传送门：http://demo.cnmsdn.com/demo39.html
html5
