Canvas内联高度和宽度属性用css样式覆盖。这是一个错误？ [英] Canvas inline height and width attributes overridden with css styles. Is this is a bug?

问题描述

我最近问了一个问题如何在不裁剪的情况下将大于我的画布的图像绘制到画布上，并在对其执行一些更改后将图像恢复到其原始尺寸。我发现解决方法是为canvas设置内联 height 和属性，比使用css height 和 width 属性来调整画布以适合您的布局。

例如，假设我的图像的尺寸范围在400像素到2000像素之间。但我不想让画布这么大，我不想要的图像也被裁剪（因为当保存图像与 toDataURL 什么是画布是什么保存）。这是什么工作的：

  // style 
 #mycanvas {
 width：400px; 
 height：400px; 
} 
 
< canvas id =mycanvaswidth =2000height =2000/> 
  

这个工作正常，我的图片出来好。
但是这是行为bug，并且必须在未来更改/修复？

解决方案

此行为通常用于控制画布的大小：

• 解析属性


• 伸缩的CSS

查看 HTML5中的画布宽度和高度。

I recently asked a question on how to draw an image larger than my canvas onto the canvas without cropping and save the image back into its original dimensions after performing some changes on it. I found the solution is to set the inline height and width attributes for the canvas larger than the image, and use css height and width properties to style the canvas to fit into your layout.

For example, assuming my images could range between 400px to 2000 px in dimensions. But I don't want the canvas to be so big, and I don't want the images to be cropped as well (because when saving the image with toDataURL what is on the canvas is what is saved). This is what works:

//style
#mycanvas{
    width: 400px;
    height: 400px;
}

<canvas id="mycanvas" width="2000" height="2000" />

This works fine and my images come out well. But is this behavior buggy and bound to be changed/fixed in the future? I'm planning to use this solution for a task at hand.

Any guidance?

解决方案

This behaviour is commonly used for controlling the size of a canvas:

• Attributes for resolution
• CSS for stretching/shrinking

See Canvas width and height in HTML5.

这篇关于Canvas内联高度和宽度属性用css样式覆盖。这是一个错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！