為什么在進(jìn)行圖形變化的操作后，星星只固定在（0,0）處
<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8"/>
? ? <title>star sky</title>
</head>
<body>
? ? <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto"></canvas>
</body>
? ? <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);
? ? ? ? ? ? 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>
這是我的代碼，拜托大神指點(diǎn)一下，之前沒有圖形變化的時候都可以漫天星星，后來就只能像上傳的圖片里面那樣了，感覺translate和rotate都沒有起作用，而且也沒有繪制多個，但是顏色等樣式又起作用了
2017-12-29
繪制圖形的點(diǎn)一直在(0,0)， 先translate將繪制點(diǎn)移到(x,y)，然后開始drawstar才會改變位置
2017-12-29
先translate再drawstar