为了账号安全,请及时绑定邮箱和手机立即绑定

手机浏览器显示小球颜色

为什么我在电脑上演示时多彩的小球能正常显示,但是在手机上看到的就只有一个色?

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绘图详解
  • 参与学习       72745    人
  • 解答问题       422    个

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

进入课程

手机浏览器显示小球颜色

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信