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

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

手機瀏覽器顯示小球顏色

為什么我在電腦上演示時多彩的小球能正常顯示,但是在手機上看到的就只有一個色?

http://img1.sycdn.imooc.com//5998052e000126a107201280.jpg

http://img1.sycdn.imooc.com//5998052f0001295011980709.jpg

//?JavaScript?Document
var?balls=[];
var?canvas_width=1000;
var?canvas_height=600;
var?canvas=document.getElementById('canvas');
var?context=canvas.getContext('2d');
window.onload=function(){
	WINDOW_WIDTH=document.body.clientWidth;
	WIDOW_HEIGHT=document.body.scrollHeight||document.documentElement.clientHeight;
	canvas.width=canvas_width;
	canvas.height=canvas_height;
	//context.globalAlpha=0.7;
	context.globalCompositeOperation="xor";
	addBalls();
	
	setInterval(function(){
		drawBalls(context);
		updateBalls();
		
	},50);
	
};
//繪制小球
function?drawBalls(cxt)
{
	cxt.clearRect(0,0,canvas_width,canvas_height);//對一個矩形空間內的圖像進行刷新
	cxt.beginPath();
	cxt.fillStyle="#4EB8EB";
	cxt.font="20px?sans-serif";
	cxt.textAlign="center";
	cxt.closePath();
	cxt.fillText("第一次自己用Canvas做出小小的作品",500,20);
	
	
	for(var?i=0;i<balls.length;i++)
		{
						
			cxt.fillStyle=balls[i].color;
			cxt.beginPath();
			cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI,true);
			cxt.closePath();
			cxt.fill();		
		}
}
//添加彩色小球
function?addBalls()
{
	for(var?i=0;i<80;i++)
		{
			var?r=Math.random()*20+30;
			var?x=Math.random()*canvas_width;
			var?y=Math.random()*canvas_height;
			var?R=Math.random()*255+1;
			var?G=Math.random()*255+1;
			var?B=Math.random()*255+1;
			var?color="rgb("+R+","+G+","+B+")";
			var?vx=Math.random()*10;
			var?vy=Math.random()*10;
			balls[i]={
				x:x,
				y:y,
				vx:vx,
				vy:vy,
				r:r,
				color:color
			};
		}
}
//更改小球位置信息
function?updateBalls(){
	for(var?i=0;i<balls.length;i++)
		{
			balls[i].x+=balls[i].vx;
			balls[i].y+=balls[i].vy;
			if(balls[i].x+balls[i].r>=canvas_width)
				{
					balls[i].x=canvas_width-balls[i].r;
					balls[i].vx=(-1)*balls[i].vx;
				}
			else?if(balls[i].x-balls[i].r<=0)
				{
					balls[i].x=balls[i].r;
					balls[i].vx=(-1)*balls[i].vx;
				}
			if(balls[i].y+balls[i].r>=canvas_height)
				{
					balls[i].y=canvas_height-balls[i].r;
					balls[i].vy=(-1)*balls[i].vy;
				}
			else?if(balls[i].y-balls[i].r<=0)
				{
					balls[i].y=balls[i].r;
					balls[i].vy=(-1)*balls[i].vy;
				}
		}
}


正在回答

1 回答

//繪制小球
function?drawBalls(cxt)
{
????cxt.clearRect(0,0,canvas_width,canvas_height);//對一個矩形空間內的圖像進行刷新
????cxt.beginPath();
????cxt.fillStyle="#4EB8EB";
????cxt.font="20px?sans-serif";
????cxt.textAlign="center";
????cxt.closePath();
????cxt.fillText("第一次自己用Canvas做出小小的作品",500,20);
?????
?????
????for(var?i=0;i<balls.length;i++)
????????{
????????????//在這里把fillStyle放到beginPath下面即可?????????????
????????????cxt.fillStyle=balls[i].color;
????????????cxt.beginPath();
????????????cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI,true);
????????????cxt.closePath();
????????????cxt.fill();????
????????}
}


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

慕沐900688 提問者

謝謝,我試了放在下面的,還是不行,后來調試的時候發現是rgb值不是整數的原因,我將rgb隨機數取整后就能正常顯示了,可能是Firefox比較強大吧,小數它也能渲染出彩色出來,我試了其他的瀏覽器,都不行,必須是整數才可以
2017-08-21 回復 有任何疑惑可以回復我~
#2

Dva_Come_to_web 回復 慕沐900688 提問者

送你一個昨天學到的隨機生成顏色的表達式吧, color = "#" + (~~(Math.random()*(1<<24))).toString(16)
2017-08-21 回復 有任何疑惑可以回復我~
#3

慕沐900688 提問者 回復 Dva_Come_to_web

好噠,謝謝啦
2017-08-21 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
Canvas繪圖詳解
  • 參與學習       72996    人
  • 解答問題       441    個

Canvas系列教程第二課,詳解Canvas各接口,讓同學徹底掌握Canvas繪圖

進入課程

手機瀏覽器顯示小球顏色

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

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

幫助反饋 APP下載

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

公眾號

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