我的为什么效果没有星星呢==明明和老师的差不多，到底哪里出错鸟==
来源：4-1 画一片星空
qq_胖漏漏_0
2016-06-12 13:21
<!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>
写回答
关注
2回答
-
- Arya丶
- 2016-06-12 14:55:06
x y那有问题
-
- Arya丶
- 2016-06-12 16:42:18
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);
这里的x y 位置不对哦
Canvas绘图详解
Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图
72881 学习 · 422 问题
相似问题