作者 temp [javascript] 2015-09-17 22:06 (点击下载)

<!DOCTYPE html>
 
<html>
 
<head>
	<title>canvas test</title>
	<style>
		#myCanvas{
			width:800px;
			height:800px;
			box-shadow:0 0 10px rgba(0,0,0,8);
			margin:10px 10px;
		}
	</style>
</head>
<body>
	<canvas id=myCanvas width=800 height=800>unsupport</canvas>
 
	<script>
		window.onload=function(){
			var canvas=document.getElementById('myCanvas');
			var ctx=canvas.getContext('2d');
			
			ctx.strokeStyle='black';
			ctx.lineWidth=3;
			ctx.shadowOffsetX=10;
			ctx.shadowOffsetY=5;
			ctx.shadowBlur=2;
			ctx.shadowColor='rgba(0,0,0,0.5)';
 
			ctx.save();
			ctx.translate(100,100);
			ctx.beginPath();
			ctx.moveTo(0,0);
			ctx.lineTo(400,0);
			ctx.moveTo(0,0);
			for(var i=0;i<20;i+=0.1)
			{
				var x=i*20;
				var y=Math.sin(i)*20;
				ctx.lineTo(x,y);
			}
			ctx.stroke();
			ctx.restore();
		};
	</script>
</body>
 
<!--怎么画出一段曲线的?不懂循环体里的三句的内容-->
</html>