保證金有權不工作畫布HTML5和麻煩的滾動條去除

我想什麼：沒有任何水平滾動條在畫布上的等號兩邊保證金。

問題：margin-right屬性不起作用。我已經看到了一些通過指定固定寬度來解決這個問題的解決方案，但在我的情況下，我不能擁有固定的寬度。我希望我的畫布根據窗口的大小調整其寬度高度。

下面的JavaScript需要的是護理：

window.addEventListener('resize' , resizeCanvas , false); 

function resizeCanvas(){ 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight/1.2; 
}

那麼，有不同的解決方案？

對於溢出問題，如果我把overflow-x: hidden放在body之內，那麼只有滾動條消失，但問題仍然存在。畫布仍然延伸通過屏幕，因此畫布的右邊框不再可見。 See here

這裏是我的代碼：

HTML

<body onload="start()"> 
    <canvas id="myCanvas"></canvas> 
</body>

CSS

body{ 

} 

canvas{ 

    border: 1px solid black; 
    border-radius: 5px; 
    background-color: #fff; 

    margin: auto 50px auto 50px; /* works for left margin but not for right */ 

}

謝謝！

另一件事：

我沒有爲畫布設置width: 100%，因爲它扭曲它裏面的內容。

來源

2017-06-21 Swagnik Dutta

你故意做畫布一樣寬的窗口。在頂部添加邊距會使文檔比窗口更寬。 –

你是說下列行是問題嗎？ 'margin：auto 50px auto 50px;'？如果是這樣，我也嘗試刪除邊緣頂部，但沒有改變。 https://codepen.io/swagnikd/full/VWbNgV/ –

我在說這個：'canvas.width = window.innerWidth;'是問題所在。如果你不需要水平滾動條，但邊上有邊距，你顯然不能使畫布和窗口一樣寬...... –

而不是亂用邊距，只是改變畫布的寬度並居中。

CSS

canvas { 
    border: 1px solid black; 
    border-radius: 5px; 
    background-color: #fff; 
    width: 90%!important; 
}

HTML

<body onload="start()"> 
    <center> 
    <canvas id="myCanvas"></canvas> 
    </center> 
</body>

https://codepen.io/anon/pen/GEmLPL

來源

2017-06-21 12:58:26

正如克里斯說你需要設置width的canvas比頁面的整個寬度低：

canvas.width = window.innerWidth - 100;

需要注意的是，你需要拿在codepen人體畫布和border-width也有8px保證金進去，以及：

canvas.width = window.innerWidth - 118;

來源

2017-06-21 13:01:01 ikkuh

CSS clac()方法是你所需要的。只需從100％中減去邊距，即可得到理想的結果。以下是相同的演示。CSS calc() reference

function start() { 
 

 
    var canvas = document.getElementById('myCanvas'); 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight/1.2; 
 
    var ctx = canvas.getContext('2d'); 
 

 
    function rand(min, max) { 
 
    return parseInt(Math.random() * (max - min + 1), 10) + min; 
 
    } 
 

 
    function get_random_color() { 
 
    var h = rand(1, 360); 
 
    var s = rand(30, 100); 
 
    var l = rand(30, 70); 
 
    return 'hsl(' + h + ',' + s + '%,' + l + '%)'; 
 
    } 
 

 
    function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
    } 
 

 
    var balls = []; 
 
    var ballCount = getRandomInt(2, 10); 
 
    //document.getElementById('ballCountInfo').innerHTML = ballCount; 
 
    //document.getElementById('box').innerHTML = ballCount; 
 
    var startpointX = 100; 
 
    var startpointY = 50; 
 

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

 
    var randValue = getRandomInt(20, 30); 
 
    balls.push({ 
 
     x: startpointX, 
 
     y: startpointY, 
 
     vx: getRandomInt(3, 3) * direction(), 
 
     vy: getRandomInt(1, 1) * direction(), 
 
     radius: randValue, 
 
     mass: randValue, 
 
     color: get_random_color(), 
 

 
     draw: function() { 
 
     ctx.beginPath(); 
 
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); 
 
     ctx.closePath(); 
 
     ctx.fillStyle = this.color; 
 
     ctx.fill(); 
 
     } 
 
    }); 
 

 
    startpointX = startpointX + 50; 
 
    startpointY = startpointY + 40; 
 
    } 
 

 

 
    function direction() { 
 
    var chosenValue = Math.random() < 0.5 ? 1 : -1; 
 
    return chosenValue; 
 
    } 
 

 
    function draw() { 
 

 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    for (var i = 0; i < ballCount; i++) { 
 

 
     balls[i].draw(); 
 
     balls[i].x += balls[i].vx; 
 
     balls[i].y += balls[i].vy; 
 

 
     if ((balls[i].y + balls[i].vy + balls[i].radius) > canvas.height || (balls[i].y + balls[i].vy - balls[i].radius) < 0) { 
 
     balls[i].vy = -balls[i].vy; 
 
     } 
 
     if ((balls[i].x + balls[i].vx + balls[i].radius) > canvas.width || (balls[i].x + balls[i].vx - balls[i].radius) < 0) { 
 
     balls[i].vx = -balls[i].vx; 
 
     } 
 
    } 
 

 
    // \t \t onBoxTouched(); 
 

 
    //collision check 
 
    for (var i = 0; i < ballCount; i++) { 
 
     for (var j = i + 1; j < ballCount; j++) { 
 

 
     var distance = Math.sqrt(
 
      (balls[i].x - balls[j].x) * (balls[i].x - balls[j].x) + 
 
      (balls[i].y - balls[j].y) * (balls[i].y - balls[j].y) 
 
     ); 
 

 
     if (distance < (balls[i].radius + balls[j].radius)) { 
 

 
      var ax = (balls[i].vx * (balls[i].mass - balls[j].mass) + (2 * balls[j].mass * balls[j].vx))/(balls[i].mass + balls[j].mass); 
 
      var ay = (balls[i].vy * (balls[i].mass - balls[j].mass) + (2 * balls[j].mass * balls[j].vy))/(balls[i].mass + balls[j].mass); 
 
      balls[j].vx = (balls[j].vx * (balls[j].mass - balls[i].mass) + (2 * balls[i].mass * balls[i].vx))/(balls[i].mass + balls[j].mass); 
 
      balls[j].vy = (balls[j].vy * (balls[j].mass - balls[i].mass) + (2 * balls[i].mass * balls[i].vy))/(balls[i].mass + balls[j].mass); 
 
      balls[i].vx = ax; 
 
      balls[i].vy = ay; 
 
     } 
 
     } 
 
    } 
 

 
    raf = window.requestAnimationFrame(draw); 
 
    } 
 

 

 
    function onBoxTouched() { 
 

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

 
     if (balls[i].x + balls[i].radius > 600 && balls[i].x + balls[i].radius < 750 && 
 
     balls[i].y + balls[i].radius > 200 && balls[i].y + balls[i].radius < 350) { 
 

 
     //var ele = document.getElementById("box"); 
 
     ele.style.backgroundColor = balls[i].color; 
 

 
     balls.splice(i, 1); 
 
     ballCount = ballCount - 1; 
 

 
     if (ballCount == 0) { 
 
      ele.style.fontSize = "x-large"; 
 
      ele.innerHTML = "Over"; 
 
     } else { 
 
      ele.innerHTML = ballCount; 
 
     } 
 

 
     //document.getElementById('ballCountInfo').innerHTML=" "+ballCount; 
 
     } 
 
    } 
 
    } 
 

 
    window.requestAnimationFrame(draw); 
 

 
    window.addEventListener('resize', resizeCanvas, false); 
 

 
    function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight/1.2; 
 
    } 
 

 

 

 
}

* {} 
 

 
html, 
 
body {} 
 

 
canvas { 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    background-color: #fff; 
 
    width: calc(100% - 40px); 
 
    /*substract the total margin from 100% and will automoatically adjuts accordint to your need*/ 
 
    margin: auto 20px auto 20px; 
 
    /* works for left margin but not for right */ 
 
} 
 

 
#box { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: plum; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 600px; 
 
    font-size: 72px; 
 
    font-weight: bold; 
 
    color: white; 
 
    line-height: 150px; 
 
    text-align: center; 
 
} 
 

 
#info { 
 
    float: left; 
 
    font-size: 24px; 
 
    color: #6D8390; 
 
    margin-top: 20px; 
 
}

<body onload="start()"> 
 
    <canvas id="myCanvas"></canvas> 
 
</body>

希望它能幫助:)

來源

2017-06-21 13:01:20 Manish

這對我來說是一件新事物！謝謝:) –

你歡迎。總是樂於幫助:)。 – Manish

保證金有權不工作畫布HTML5和麻煩的滾動條去除

回答

相關問題