[已解决]65课，是放错了还是放错了。。

向一朵朵鲜花 · 发表于 2017-3-17 16:28:34

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">

    </style>
</head>
<body>
<canvas id="firstCanvas" width="999" height="666">大兄弟你的浏览器不支持Canvas！！！</canvas>
</body>
<script type="text/javascript">
    var canvas=document.getElementById("firstCanvas");//调用Canvas元素
    var context=canvas.getContext("2d");//返回一个对象
    var particles = [];
    for( var i = 0; i < 666; i++ ) {
        particles.push( {
            x: Math.random()*window.innerWidth,
            y: Math.random()*window.innerHeight,
            vx: (Math.random()*1-.3), //横向随机
            vy: (Math.random()*1-.3),//纵向随机
            size: 1+Math.random()*2,
            color: "#DDD"
        } );
    }
    function timeUpdate(e){
        context.clearRect(0, 0, window.innerWidth, window.innerHeight); //第一步先清理画布
        var len = particles.length;
        var particle;
        for( var i = 0; i < len; i++ ) { //循环遍历所有的雪花
            particle = particles[i];
            particle.x += particle.vx;
            particle.y += particle.vy;
            //下面都是边界检查，防止雪花跑出屏幕
            if(particle.x<=0 || particle.x>=window.innerWidth){
                particle.vx *= -1;
            }
            if(particle.y<=0 || particle.y>=window.innerHeight){
                particle.vy *= -1;
            }
            context.fillStyle = particle.color;//设置雪花为上面设置的#DDD
            context.beginPath();//开始绘制
            context.arc(particle.x,particle.y,particle.size,0,Math.PI*1.99,true);//绘制图形
            context.closePath();//停止绘制
            context.fill();//对所有绘制好的图形，进行上色
        }
    }
    setInterval( timeUpdate, 40 );
</script>
</html>

最佳答案

月排行榜 / 总排行榜

不二如是

2017-3-18 10:14:04

你不设置CSS，搞毛。。。

 <style type="text/css">
        body {
            background:#000;
            margin:0;
            padding:0;
        }
        html, body{
            height:100%;
            width:100%;
        }
        #myCanvas{
            height:100%;
            width:100%;
            display: block;
        }
    </style>

跳转到最佳答案楼层

不二如是 · 发表于 2017-3-18 10:14:04

你不设置CSS，搞毛。。。

 <style type="text/css">
        body {
            background:#000;
            margin:0;
            padding:0;
        }
        html, body{
            height:100%;
            width:100%;
        }
        #myCanvas{
            height:100%;
            width:100%;
            display: block;
        }
    </style>

账号		自动登录	找回密码
密码			立即注册