为什么在进行图形变化的操作后，星星只固定在（0,0）处

源自：4-3 应用translate、rotate和scale

为什么在进行图形变化的操作后，星星只固定在（0,0）处

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

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);

for (var i = 0; i < 200; i++)

{

var r = Math.random() * 10 + 10;

var x = Math.random() * canvas.width;

var y = Math.random() * canvas.height;

var a = Math.random() * 360;

drawStar(context, r, x, y, a);

}

function drawStar(cxt, R, x, y,rot)

{

cxt.save();

starPath(cxt);

cxt.translate(x, y);

cxt.rotate(rot / 180 * Math.PI);

cxt.fillStyle = '#fb3';

cxt.strokeStyle = '#fb5';

cxt.lineWidth = 3;

cxt.lineJoin = 'round';

cxt.fill();

cxt.stroke();

cxt.restore();

}

function starPath(cxt)

{

cxt.beginPath();

for (var i = 0; i < 5; i++) {

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>

</html>

这是我的代码，拜托大神指点一下，之前没有图形变化的时候都可以漫天星星，后来就只能像上传的图片里面那样了，感觉translate和rotate都没有起作用，而且也没有绘制多个，但是颜色等样式又起作用了

提问者：Serena_Cecilia 2017-12-29 17:01

为什么在进行图形变化的操作后，星星只固定在（0,0）处

个回答