亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

為啥運動這段代碼的時候,星星變少了呢

?<canvas id="star" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>?

?? //一片星空


? ? function starTwo() {

? ? ? ? var canvas = document.getElementById("star");

? ? ? ? canvas.width = 1200;

? ? ? ? canvas.height = 800;

? ? ? ? var context = canvas.getContext("2d");

? ? ? ? var skyStyle = context.createLinearGradient(0, 0, 0, canvas.height);

? ? ? ? skyStyle.addColorStop(0.0, "#000");

? ? ? ? skyStyle.addColorStop(1.0, "#035");

? ? ? ? context.fillStyle = skyStyle;

? ? ? ? context.fillRect(0, 0, canvas.width, canvas.height);

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

? ? ? ? ? ? var r = Math.random() * 5 + 5;

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

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

? ? ? ? ? ? var a = Math.random() * 360;

? ? ? ? ? ? drawStarTwo(context, x, y, r, a);

? ? ? ? }

? ? }


? ? //繪制五角星

? ? function drawStarTwo(cxt, x, y, R, rot) {

? ? ? ? cxt.save();

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

? ? ? ? cxt.translate(x, y);

? ? ? ? //cxt.scale(R, R);

? ? ? ? starPath(cxt);

? ? ? ? cxt.fillStyle = "#fb3";

? ??

? ? ? ? cxt.fill();

? ? ??


? ? ? ? cxt.restore();

? ? ? ? //繪制出在(x,y),大小為R,旋轉rot度的五角星


? ? }


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

?

? ? }


? ? window.onload = function () {

? ??

? ? ? ? starTwo();

? ? }


正在回答

2 回答

在drawStarTwo函數中,把cxt.translate(x, y)放在cxt.rotate(rot / 180 * Math.PI);之前,就可以了。

1 回復 有任何疑惑可以回復我~

怎么會變少?i=0;i<200,畫200次星星。 是因為畫布變寬了,星星分布稀疏,看起來少了吧

0 回復 有任何疑惑可以回復我~
#1

哈嘍姑娘

http://www.xianlaiwan.cn/qadetail/156711
2016-08-05 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

為啥運動這段代碼的時候,星星變少了呢

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號