Javascript 设置画布宽度100%和最大宽度

我想将宽度设置为100%，并将其限制为画布元素的最大宽度。无论画布宽度如何，我都希望有静态画布高度。 但当我使用css设置它时，浏览器似乎使用标准尺寸绘制画布，并将画布重新调整为100%宽度，并按比例调整高度。但最糟糕的是，它在画布内缩放图片。我还试图从JS中设置画布的css宽度属性，但结果相同

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

使画布100%宽度 但按比例调整高度 并在画布中缩放图像。 用JS设置css也是如此

---

我该怎么做

画布元素的绘图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，运动看起来更像视频

更新添加了JSFIDLE

你好 var canvas=document.getElementById（'myCanvas'）； var context=canvas.getContext（'2d'）； context.beginPath（）； rect（0,0284120）； context.lineWidth=4； context.strokeStyle='black'； stroke（）； var canvas2=document.getElementById（'myCanvas2'）； 画布2.宽度=568； 画布2.高度=240； var context2=canvas2.getContext（'2d'）； context2.beginPath（）； context2.rect（0,0568240）； context2.lineWidth=4； context2.strokeStyle='black'； context2.stroke（）； var img=document.getElementById（“dove”）； context2.drawImage（img，0,0）； 背景图像（img，0,0）； 如果未通过其他方式设置css和API宽度，则width attrib将同时设置css和API宽度，但100%宽度对API无效，因此API将返回其默认宽度400px

---

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

发布一些代码让我们看一看或做一个小提琴我认为这只是画布行为。如果你放入一个与画布尺寸不同的图像，它会缩放和拉伸。我想..我的画布是一个国家的互动地图。用户可以缩放和移动此地图。因此，我希望此画布尽可能大，内部的地图比例相同。可能重复，但当我将画布大小设置为两倍大时，在本例中，它将成为浏览器窗口宽度的两倍（因此我将获得水平滚动），实际画布高度将为1260，而不是我需要的630。我不明白你的反别名提示。@Tigrokonvel我添加了一个JSFIDLE，以防其他人试图使用这个答案而不依赖jQ（真的，OP？），请改用

window.screen.availWidth

和

.availHeight

。

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;

<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);