【问题标题】:JavaScript canvas - I want to remove the scrollbarJavaScript 画布 - 我想删除滚动条
【发布时间】:2017-07-04 14:46:26
【问题描述】:

JavaScript 画布 - 我想移除 x 轴滚动条。

和innerWidth有关吗?还是与我的设备/浏览器有关 - 我在 MacBook Air 上并使用谷歌浏览器。

    var canvas = document.getElementById('sky');
var ctx = canvas.getContext('2d')

var w = window.innerWidth;
var h = window.innerHeight;

canvas.width = w;
canvas.height = h;

// GENERATE THE stars

var mf = 10000; //QUANTITY OF stars
var flakes = [];

//loop through empty stars and apply attributes('width,height')

for(var i = 0; i < mf; i++)
 {

    flakes.push({
        x: Math.random() * w,
        y: Math.random() * h,
        r: Math.random() * 2, // radius of each star = min 2px max 7px
        d: Math.random() + 1// like the weight, how far they would fall
    })

}

//draw flakes on the canvas

function drawFlakes()

{
    ctx.clearRect(0, 0, w, h); // clears canvas
    ctx.fillStyle = "#ffff00"; // fill the canvas or shapes will be white
    ctx.beginPath(); // about to begin a path or draw shape
    for(var i = 0; i < mf; i++) // going through each star
    {
        var f = flakes[i]; // grabbing fstar
        ctx.moveTo(f.x, f.y); 
        ctx.arc(f.x, f.y, f.r, 0, Math.PI*1, true); 
    }
    ctx.fill(); // fills flakes
    moveFlakes();

}

// animate flakes

var angle = 0; // controls movement of flakes

function moveFlakes(){
    angle += 0.01;
    for(var i = 0; i < mf; i++)
    {
        //store current flake
        var f = flakes[i];

        //update x any coorodinates of each flake
        f.y += Math.pow(f.d, 2) + 1;
        f.x += Math.sin(angle) * 60;

        //if snows flakes reach bottom, send a new one to the top

            if(f.y > h) {
                flakes[i] = {
                    x: Math.random()* w,
                    y: 0,
                    r: f.r,
                    d: f.d
                }
            }
    }
 }


    setInterval(drawFlakes, 25);


}

【问题讨论】:

  • 谢谢,效果很好!
  • 我该怎么做?

标签: javascript canvas width


【解决方案1】:

尝试将此样式添加到正文标签overflow: hidden

【讨论】:

    猜你喜欢
    • 2011-12-18
    • 1970-01-01
    • 2017-07-03
    • 1970-01-01
    • 2021-12-12
    • 1970-01-01
    • 1970-01-01
    • 2019-06-04
    • 2019-05-27
    相关资源
    最近更新 更多