使用CSS设置画布的宽度和高度可移动笔 [英] Setting the canvas width and height with css shifts the pen

问题描述

当我使用CSS设置画布的宽度和高度时，笔会发出蜂鸣声.在浏览器(铬)中放大/缩小后，笔不再移动.我正在使用字面意义上的canvas小部件，并希望将其适合其父div的画布.初始化画布后，我使用jquery css函数设置画布的宽度/高度.但是我的笔不在同一坐标上.在当前浏览器中滚动或滚动后，笔位于鼠标指针所在的坐标处.谁能帮我吗?

When i'm setting the canvas width and height with css, the pen is beeing shifted. After zooming in/out in the browser (chromium), the pen isn't shifted anymore. I'm using the literally canvas widget and want to fit the canvas to its parent div. After initializing the canvas, i'm setting the width/height of the canvas with the jquery css function. But my pen isn't at the same coordinates. After scrolling in or out in my current browser, the pen is at the coordinates where my mouse pointer is. Can anyone help me?

$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth});

推荐答案

使用画布通常会发现您实际上需要正常设置width和height属性，而不是css/style宽度和高度.

With canvas you usually find you need to actually set the width and height attributes normally, rather than css/style width and heights.

我的代码共享示例将尝试:

My example with your code shared would be to try:

$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth);

您还可以确认要为画布的高度和宽度设置"containerWidth"吗?

Can you also confirm you are intending to set "containerWidth" for the height and width of the canvas?

关于调整画布的大小，请考虑添加这样的自适应CSS，以保持位置值，但要调整移动设备的大小.

Regarding resizing the canvas, consider adding some responsive CSS like this, to maintain the position values, but resize for mobile.

canvas {
  width: 100%;
  height: auto;
}

尽管如此，您仍然需要画布本身的width和height属性.

You will still need the width and height attributes on the canvas itself though.

这篇关于使用CSS设置画布的宽度和高度可移动笔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！