針對不同設備的響應畫布

Question

我想將畫布寬度設置爲div寬度。 canvas容器的大小取決於瀏覽器的寬度。

<div class="canvas-container" width=100% align="center"> 
    <canvas id="Canvas"></canvas> 
</div> 

Answer 1

使用window.resize在每個調整事件的事件和re-draw畫布元素（在處理）

試試這個：

(function() { 
 
    var canvas = document.getElementById('canvas'), 
 
    context = canvas.getContext('2d'); 
 
    window.addEventListener('resize', resizeCanvas, false); 
 

 
    function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
    context.fillRect(10, 10, canvas.width - 20, canvas.height - 20); 
 
    } 
 
    resizeCanvas(); 
 
})();

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
canvas { 
 
    display: block; 
 
    background: #eee; 
 
}

<canvas id="canvas"></canvas>