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

首页课程实战体系课手记专栏慕课教程

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

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

Serena_Cecilia

2017-12-29 17:01

<!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都没有起作用，而且也没有绘制多个，但是颜色等样式又起作用了

写回答关注

2回答

徐锦杰

2017-12-29 21:55:07

已采纳

绘制图形的点一直在(0,0)，先translate将绘制点移到(x,y)，然后开始drawstar才会改变位置

0 0
徐锦杰

2017-12-29 21:52:44

先translate再drawstar

0 0

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题

为什么星星固定在左上角了？

回答 1

为什么我的星星都在一坨？

回答 1

还是关于为什么星星只有一个还定在左上角的问题

回答 1

为什么明明设置了绘制10棵星星，运行之后，出现满画布的星星

回答 4

为什么没有星星

回答 2

打开慕课网App查看更多内容