为什么具有更大尺寸的HTML5 Canvas绘制线？ [英] Why HTML5 Canvas with a larger size stretch a drawn line?

问题描述

我使用HTML5 < canvas> 绘制线条。

I am using a HTML5 <canvas> to draw lines on.

从默认值300x150到匹配另一个< div> 的尺寸，我的线条显示为拉伸并且比以前更粗。为什么会发生这种情况？

When I change the dimensions from the default of 300x150 to match the dimensions of another <div> my lines appear stretched and are thicker than before. Why is this happening?

我想在画布上绘制线条以匹配< div> 在它的前面（在一个较高的 z-index ）在页面上的同一位置。

I want to draw the lines on the canvas to match the position of elements on the <div> that is in front of it (with a higher z-index) in the same position on the page. How can I stop this stretching from happening?

编辑：这只会出现在Firefox中。

This appears only to be in Firefox.

推荐答案

您不能使用CSS更改画布大小。如果你这样做的行为像一个图像，它会伸展你必须在javascript与画布属性canvas.width，canvas.height

You can't change canvas size with CSS. If you do it will behave like an image and it will stretch You have to do it in javascript with canvas properties canvas.width, canvas.height

这篇关于为什么具有更大尺寸的HTML5 Canvas绘制线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！