画布高度和宽度

-1

在HTML画布中编程时，画布的js尺寸并不总是与CSS尺寸匹配。为什么会发生这种情况，我该如何解决这个问题？画布高度和宽度

2017-07-09 Shay Lempert

你能分享一些你试过的代码吗？ – raju

[将HTML5画布调整为适合窗口的大小]（https://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window） –

画布不应与CSS大小一致。它应该使用JS的HTML属性动态设置这些属性的大小。 –

你可以尝试设置画布的宽度和高度等于窗口对象的尺寸：

function createCanvas() { 
    var ctx = //the canvas context; 
    ctx.canvas.width = window.innerWidth; 
    ctx.canvas.height = window.innerHeight; 
    //your code 
}

此外，它是定身和HTML标记是个好主意窗口的全宽：

body, html{ 
    height: 100%; 
    width: 100%; 
}

来源

2017-07-09 15:14:15 Kaloyan

是的，你可以。但是这并不能回答这个问题。 –

我发现了这个问题。当您实际上必须设置宽度和高度属性时，我正在设置使用CSS的尺寸。这导致它被拉伸/倾斜。

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');

http://jsfiddle.net/h2yJn/66/

来源

2017-07-09 15:14:50

您还可以使用纯JavaScript做到这一点，并根据您的CSS值设置画布的尺寸在javascript：

//Get Canvas 
var canvas = document.getElementById("canv"); 

// Get computed style of the canvas element. 
var cstyle = window.getComputedStyle(canvas); 

// Returns the width as str in px: e.g. 600px. 
// Parse resolves that issue. 
canv.width = parseInt(cstyle.width); 
canv.height = parseInt(cstyle.height);

演示： https://jsfiddle.net/ofaghxfq/2/

来源

2017-07-09 15:39:41

画布高度和宽度

回答

相关问题