Javascript，Canvas，and Resizing

Question

我正在尋找一個可調整大小的畫布項目。我讀過的一些網站推薦使用CSS來重新設計，但是我也看到有人說永遠不要這樣做，因爲它通過伸展東西來模糊文本。但是，如果你只是告訴畫布在JavaScript中調整大小不會填充文本，如下面的例子需要重做？

var canvas = document.getElementById("example"); 
var ctx = canvas.getContext('2d'); 
var cornerRadius = 10; 

function drawMe() { 
    ctx.fillStyle = "red"; 
    ctx.strokeStyle = "red"; 
    ctx.lineJoin = "round"; 
    ctx.lineWidth = cornerRadius; 
    ctx.strokeRect(5+(cornerRadius/2), 23+(cornerRadius/2), 155-cornerRadius,  406-cornerRadius); 
    ctx.fillRect(5+(cornerRadius/2), 23+(cornerRadius/2), 155-cornerRadius,  406-cornerRadius); 
    ctx.font = '16pt Arial'; 
ctx.fillStyle = 'white'; 
ctx.textAlign="start"; 
ctx.fillText('Text', 8, 70); 
ctx.fillText('Text', 8, 128); 
} 

function redraw() { 
    ctx.strokeStyle = 'blue'; 
    ctx.lineWidth = '5'; 
    ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight); 
    drawMe(); 
} 
window.onload = function() { 
    redraw(); 
}; 

項目的例子。
帆布爲HTML格式設置爲1280 x 800。 編輯成包括https://jsfiddle.net/o1rkg1tf/

Answer 1

爲了得到一個canvas元素可以調整大小，你需要處理窗口調整大小事件。 之後，您需要將畫布寬度和高度設置爲窗口大小值。 最後，在您的畫布元素中使用相對值，主要寬度和高度值的百分比。

這裏是你的榜樣的更新： https://jsfiddle.net/abelflopes/o1rkg1tf/5/

var wH = window.innerHeight; 
var wW = window.innerWidth; 
... 
function drawMe() { 
    canvas.height = wH; 
    canvas.width = wW; 
    ... 
} 
window.addEventListener("resize", function() { 
    wH = window.innerHeight; 
    wW = window.innerWidth; 
    drawMe(); 
    redraw(); 
}); 

我希望我是不夠清楚，以幫助您。