设置画布宽度100％和最大宽度

我想设置宽度100％并将其限制为最大宽度到我的画布元素。无论画布宽度如何，我都希望拥有静态画布高度。但是，当我用CSS设置它时，似乎浏览器用标准siza绘制画布，并将canvas重新设为100％宽度，并使其高度达到100％。但最糟糕的是，它会在画布内缩放图片。我也尝试从JS设置画布的CSS宽度属性，但它导致了相同的结果。设置画布宽度100％和最大宽度

<canvas id="myCanvas" width="100%" height="630px"></canvas>

使得与100像素的宽度和高度630像素

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

和CSS

#myCanvas { 
    width:100%; 
    height:630px; 
}

使得画布100％的宽度但proportionaly调整大小高度和缩放画布内的图像画布。用JS设置CSS也一样。

我该怎么做？

来源

2014-09-05 Alex Velickiy

发表一段代码让我们看看或做小提琴 – Richa 2014-09-05 09:47:58

我认为这只是画布的行为。如果您放入的图像与您的画布尺寸不同，它会缩放并拉伸。我想.. – 2014-09-05 10:05:14

我的画布是一个国家的互动地图。用户可以缩放和移动该地图。所以我希望这幅画布尽可能大，并且里面的地图尺寸相同。 – 2014-09-05 10:10:17

画布元素的绘制API尺寸不需要与它在屏幕上占据的CSS尺寸相匹配。这允许人们如果需要的话可以做子像素图形（用抗锯齿创建平滑运动）。所以100％的画布宽度意味着它不需要它应该使用的像素数量，我相信你会得到400的默认宽度，就好像根本没有使用宽度一样。然而，它可以用JavaScript来改变你想要的任何宽度。

var canvas = document.getElementsByTagName('canvas')[0]; 
canvas.width = $(window).width(); 
canvas.height = 630;

或者做消除锯齿。

var canvas = document.getElementsByTagName('canvas')[0]; 
canvas.width = $(window).width()*2; 
canvas.height = 630*2;

将画布宽度设置为其在屏幕上具有的空间的上方的数字。每个画布像素只占用实际像素的1/2，移动看起来像更多的视频。

更新加入的jsfiddle

http://jsfiddle.net/juaovd7o/

<canvas id="myCanvas" width="284px" height="120px">hello</canvas> 
<canvas id="myCanvas2" style="width:284px;height:120px;"></canvas> 
<img src="http://whitedove-coding.com/static/whitedove-829.png" id="dove"> 

var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     context.beginPath(); 
     context.rect(0, 0, 284, 120); 
     context.lineWidth = 4; 
     context.strokeStyle = 'black'; 
     context.stroke(); 
var canvas2 = document.getElementById('myCanvas2'); 
     canvas2.width=568; 
     canvas2.height=240; 
     var context2 = canvas2.getContext('2d'); 
     context2.beginPath(); 
     context2.rect(0, 0, 568, 240); 
     context2.lineWidth = 4; 
     context2.strokeStyle = 'black'; 
     context2.stroke(); 
var img=document.getElementById("dove"); 
     context2.drawImage(img,0,0); 
     context.drawImage(img,0,0);

宽度ATTRIB同时设置的CSS和API宽度如果它们不通过其他方式设置，但100％的宽度是不是有效的API所以API回落到400px的默认宽度。

根据您的问题，您需要同时使用100％的CSS宽度并将画布API设置为或设置为任意数量的像素。 jquery $（window）.width（）为我们提供了100％的像素数。

来源

2014-09-05 10:16:53 Wayne

但是，当我将画布大小设置为两倍时，在此示例中，它将变成浏览器窗口宽度的两倍（并且因此我将获得水平滚动），而实际画布高度将为1260，而不是我需要的。我不明白你的反别名提示。 – 2014-10-16 15:19:18

@Tigrokonvel我加了一个jsfiddle – Wayne 2014-10-17 06:14:15

设置画布宽度100％和最大宽度

回答

相关问题