<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>star</title>
????<style>
????canvas{
????????border:?solid?1px?black;?
????????display:?block;
????}
????</style>
</head>
<body>
????<canvas?id="canvas"?width="800"?height="800"></canvas>
????<!--?//?<script?src="../js/star.js"></script>?-->
????<script>
????
????window.onload=function(){
????????var?can=document.getElementById("canvas");
????????var?ctx=can.getContext("2d");
????????var?w=can.width;
????????var?h=can.height;
????????ctx.fillStyle="black";
????????ctx.fillRect(0,?0,?w,?h);
????????for(var?i=0;i<20;i++)
????????{
????????????var?r=Math.random()*10+10;
????????????var?x=Math.random()*w;
????????????var?y=Math.random()*h;
????????????var?a=Math.random()*360;
????????????drawStar(ctx,x,y,r,r/2.0,a);
????????}
????????//?drawStar(ctx,400,400,300,150,30);
????}
????function?drawStar(ctx,x,y,R,r,rot){
????????ctx.beginPath();
????????for(var?i=0;i<5;i++)
????????{
????????????ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
???????????????????????-Math.sin((18+i*72-rot)/180*Math.PI)*R+x);
????????????ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+y,
???????????????????????-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
????????}
????????ctx.closePath();
????????ctx.lineWidth=10;
????????ctx.fillStyle="#fb3";
????????ctx.strokeStyle="#fb5";
????????ctx.fill();
????????ctx.stroke();
????????
????}
????</script>
</body>
</html>
2016-06-12
x y那有問題
2016-06-12
這里的x y? 位置不對哦