我想将宽度设置为 100% 并将其限制为 max-width 到我的 Canvas 元素。无论 Canvas 宽度如何,我都希望拥有静态 Canvas 高度。 但是当我用 css 设置它时,浏览器似乎使用标准尺寸绘制 Canvas 并将 Canvas 重新调整为 100% 宽度并按比例调整高度。但最糟糕的是它会缩放 Canvas 内的图片。我还尝试从 JS 设置 Canvas 的 css 宽度属性,但结果相同。
<canvas id="myCanvas" width="100%" height="630px"></canvas>
制作宽度为 100 像素、高度为 630 像素的 Canvas
<canvas id="myCanvas"></canvas>
和CSS
#myCanvas {
width:100%;
height:630px;
}
使 Canvas 宽度为 100% 但按比例调整高度 并在 Canvas 内缩放图像。 用 JS 设置 css 也是一样的。
我应该怎么做?
最佳答案
canvas 元素的绘图 API 尺寸不需要与其在屏幕上占据的 CSS 尺寸相匹配。这允许人们根据需要制作子像素图形(以创建具有抗锯齿功能的平滑运动)。所以 100% 的 Canvas 宽度意味着它不需要它应该使用的像素数,我相信你得到默认宽度 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;
将 Canvas 宽度设置为大于它在屏幕上的空间的数字。每个 Canvas 像素仅占实际像素的 1/2,运动看起来更像视频。
更新添加的jsfiddle
<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);
如果未通过其他方式设置宽度属性,则会同时设置 css 和 API 宽度,但 100% 宽度对于 API 无效,因此 API 回退到其默认宽度 400px。
根据您的问题,您需要同时使用 100% 的 CSS 宽度并将 Canvas API 设置为或设置为任意数量的像素? jquery $(window).width() 为我们提供了 100% 的像素数。
关于javascript - 设置 Canvas 宽度 100% 和最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25683028/