Question

我正在制作标题中描述的一些东西，但我不能让画布响应。我想做的就是制作一个比例为16：9且宽度设置为100％的画布，并通过jQuery计算高度以保持相同的比例，所以当一个4：3 LCD上的人用16中的ONE画画时：9，线条不会显得拉长。但它无法正常工作。如果我使用此代码：

<canvas id="canvas" width="1600" height="900">
</canvas>

$('#canvas').css({
        width: $(window).width(),
        height: $(window).width() * 9 / 16
   });

它不起作用，因为它在绘图时出错。

我尝试的第二件事是：

$('#canvas').attr('width', $(window).width()).attr('height', $(window).width() * 9 / 16);

它只是在较小的屏幕上裁剪图纸。

我该如何做到这一点？

Answer 1

由于您似乎不接受副本，因此以下是您的解释：

Canvas有自己的坐标矩阵
这意味着您在绘图方法中使用的x和y值将取决于此矩阵，而不是您的视图页面。

以下示例将向您展示，对于两个完全相同的画布，由于您在其上应用的CSS，结果在屏幕上看起来会有所不同：

var ctx = normal.getContext('2d'),
    ctx2 = CSS_stretched.getContext('2d');
ctx.textAlign = ctx2.textAlign = 'center';
ctx.textBaseline = ctx2.textBaseline ='bottom';
for(var i=0; i<26; i++){
  ctx.fillRect(i*20, 0, 1, 10);
  ctx2.fillRect(i*20, 0, 1, 10);
  ctx.fillText(i*20, i*20, 25);
  ctx2.fillText(i*20, i*20, 25);
  }

#CSS_stretched{width : 50%;}
canvas{border: 1px solid black;}
p,canvas{display: block}

<p>Unstretched canvas:</p>
<canvas id="normal"  width="500" height ="25"></canvas>
<p>Stretched canvas :</p>
<canvas id="CSS_stretched" width="500" height ="25"></canvas>

当您尝试使用鼠标坐标等一些功能在画布上绘画时，这会变得非常痛苦，因为事件坐标基于页面：

var ctx = canvas.getContext('2d');
canvas.onmousemove = function(e){
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    ctx.clearRect(0,0,canvas.width, canvas.height)
    ctx.fillRect(x-1, y-20, 2, 40)
    ctx.fillRect(x-20, y-1, 40, 2)
    }

stretch.onclick = function(){
    canvas.className = canvas.className?'':'stretched';
  }

canvas{border: 1px solid black;}
.stretched{width: 100%;}

<button id="stretch">toggle CSS stretching</button><br>
<canvas id="canvas" width="250" height="135" class="stretched"></canvas>

CSS拉伸意味着抗锯齿算法
_{它也提供image-rendering属性，但我不认为它会做你想要的......}

当您告诉浏览器以较小的比例渲染时，您告诉他像素小于像素。然后它必须在原始像素位置周围创建假半透明的。这也会产生一些瑕疵和蹩脚渲染的印象。

您已经可以在第一个代码段中看到此效果：
^{请注意，即使在非缩放画布上，浏览器也已经应用了抗锯齿功能，但是废弃的垃圾只是更加糟糕。}

所以，现在我希望你已经明白为什么“它在绘制”时出错了，我们可以来解决方案：

不要使用CSS来设置画布大小。而是设置画布.width和.height属性。这是我可以推荐的最简单，唯一的解决方案。

当然，在你自己的情况下，它确实暗示了你已经遇到的其他问题：
如果将画布大小设置为页面大小，则小屏幕将具有裁剪的画布。

对此的一个解决方案是使用容器，这将允许滚动条仅出现在画布上。

你也可以将每个人的画布都修复到最小的画布，但是如果你也是针对手机，那么在大屏幕上看起来会很奇怪。

或者，您必须进行所有计算以将画布坐标转换为相对坐标（包括笔划），如果您编写它，我会很高兴看到代码。

但这是一个只有你能回答的设计问题。

响应式协作绘图板

1 个答案: