我一直遇到用画布生成图像的问题,但是当我在CSS中更改尺寸时,尺寸不会改变。例如:假设我在画布中创建了一个200px x 200px的正方形图像。然后在CSS中,将尺寸设置为100px x 100px。除了缩放图像外,仅显示原始图像的1/4。如何在不实际更改画布本身的情况下缩放画布?
预期结果。
您的矩形未裁剪,正在调整大小。
较小的画布为较大画布的1/4,矩形为1/4。
在不了解您的设计要求的情况下,您可能要避免使用CSS缩放画布。如您所知,使用CSS更改宽度/高度将“拉伸/缩小”工程图的大小。
相反,请更改canvas元素的宽度/高度,而不是CSS宽度/高度。当您更改画布元素的宽度/高度时,您已经完成的所有绘图都将被删除(您必须重新绘制这些绘图)。但是新图纸的尺寸将“正确”。
当您想要调整画布大小(在javascript中)时:
var canvas = document.getElementById("myCanvas");
canvas.width=100;
canvas.height=100;
// changing the canvas width/height will automatically erase and drawings
// so you must now redraw those drawings.
如果要缩放画布而不必重新绘制,可以执行以下操作:
var img=new Image();
img.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width=100;
canvas.height=100;
ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src=canvas.toDataURL();
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句