如何解决使用100%宽度的画布缩放画布形状
我正在尝试创建一个宽度为100%的画布元素的示例,其中包含一个红色正方形“边框”矩形。如果将CSS中的canvas元素的宽度设置为100%,它将成功增长以适合视口的整个宽度,但是rect模糊,因为CSS只是拉伸了画布。这在这里得到证明:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(0,300,150);
canvas {
width: 100%;
}
<canvas></canvas>
我可以将画布的高度和宽度设置为等于clientWidth
和clientHeight
,如下所示,这意味着画布不会被拉伸,但是现在我的画布上下文尺寸不再是300 x 150,我不知道实际的尺寸是多少。如何将尺寸可预测的画布绘图设置为300 x 150列,同时将画布元素缩放为100%的宽度? Webgl有gl.viewport(0,gl.canvas.width,gl.canvas.height);
,我相信它可以解决此问题,画布是否具有类似的方法,还是您需要缩放形状的所有尺寸以具有与画布元素相同的缩放比例?例如乘以clientWidth / 300
和clientHeight / 150
?
const canvas = document.querySelector("canvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(0,150);
canvas {
width: 100%;
}
<canvas></canvas>
解决方法
一个好的解决方案似乎是在画布上下文上使用.scale()
方法,如下所示。这样,您就可以在画布上下文中使用所需的任何坐标系。
const canvas = document.querySelector("canvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const ctx = canvas.getContext("2d");
ctx.scale(canvas.clientWidth / 300,canvas.clientHeight / 150);
ctx.strokeStyle = "red";
ctx.strokeRect(0,300,150);
canvas {
width: 100%;
}
<canvas></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。