canvas学习之初级运用
<html>
<head>
<meta charset=utf-8>
<title>绘制简单图形</title>
<style type="text/css">
canvas{
border: 1px solid #aaa;
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
var c = document.querySelector("#canvas");
c.width = 800;
c.height = 800;
//画布
var context = c.getContext("2d");
//五角星的绘制
context.fillStyle = "black";
context.fillRect(0,0,800,800);
for(var i = 0;i < 200;i++)
{
context.save();
var r = Math.random()*10+10;
var x = Math.random()*c.width;
var y = Math.random()*c.height;
var rot = Math.random()*360;
drawstar(context,r/2,r,x,y,rot);
context.restore();
}
function drawstar(cxt,r,R,x,y,rot)
{
context.beginPath();
for( var i = 0; i <5 ;i++)
{
cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
cxt.closePath();
cxt.lineWidth = 3;
cxt.fillStyle = "yellow";
cxt.stroke
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
}
</script>
</html>
