<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[有问题？？？]改写后的绘制200个随机的五角星</title>
</head>
<body>
<canvas id="canvas" style="margin:auto;top:0;left:0;bottom:0;right:0;position:absolute;">当前浏览器不支持，请更换浏览器</canvas>
<script>
window.onload=function()
{
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800;
context.fillStyle="black";
context.fillRect(0,0,canvas.width,canvas.height);
//绘制200个星星
for(var i=0;i<200;i++)
{
var r=Math.random()*10+10;//产生一个5-15之间的随机数，Math.random是产生一个0-1之间的数
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var a=Math.random()*360;//产生一个随机的角度
drawStar(context,x,y,a);//进行五角星函数的调用400、400控制星星的位移，R，r控制星星的大小
}
}
//自定义一个绘制五角星的函数，使用时直接调用（使得绘制五角星函数化）
function drawStar(cxt,x,y,rot)
{
cxt.save();
starPath(cxt);
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.lineWidth=1;
cxt.strokeStyle="blue";
cxt.fillStyle="white";
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();
cxt.restore();
}
//绘制标准五角星
function starPath(cxt)
{
cxt.beginPath();
//通过对五角星的十个顶点的分析，得出以下(300为大圆半径，150为小圆半径)
for(var i=0;i<5;i++)
{
//最开始为18度，180是JS中是弧度制，400表示使五角星在中间,-rot表示顺时针转30度，绘制五角星时是逆时针绘制的，所以顺时针转的话减相应角度，lineTo的纵坐标是负的，因为JS中Y轴是向下的。
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*20,
-Math.sin((18+i*72)/180*Math.PI)*20);
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20,
-Math.sin((54+i*72)/180*Math.PI)*0.5*20);
}
cxt.closePath();
}
</script>
</body>
</html>
starPath(cxt);
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
应该是先图形变换，再开始画星星：
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
starPath(cxt);
lublank解释的应该是对的
这好坑啊 你把canvas 的绝对定位去掉 再试试~！！！
这是js？把问题标签弄到js那边吧，那样多点人知道滴
额，没用过canvas，赶快去学习下- -！
根本看不懂