html5帆布冲程()厚而模糊
-
10-10-2019 - |
题
我正在尝试允许用户在画布上绘制矩形(例如选择框)。我得到了一些荒谬的结果,但后来我注意到,即使只是从我的参考中尝试代码 这里, ,我得到了巨大的模糊线条,不知道为什么。
它是在 dylanstestserver.com/drawcss. 。 JavaScript是内联的,因此您可以检查一下。我正在使用jQuery简化获取鼠标坐标。
解决方案
由于某种原因,您的画布被拉伸。因为您有其CSS属性 width
调成 100%
, ,它正在从某种本地大小中伸展。这是使用CSS之间的区别 width
财产和 width
属性 <canvas>
标签。您可能想尝试使用一些JavaScript使其填充视口(请参阅jQuery .width()):
jQuery(document).ready(function(){
var canvas = document.getElementById('drawing');
canvas.width(($(window).width()).height($(window).height());
var context = canvas.getContext('2d');
//...
其他提示
如果您使用CSS设置画布高度和宽度,而不是在画布元素中设置高度和宽度,则会发生模糊问题。
<style>
canvas { height: 800px; width: 1200px; } WRONG WAY -- BLURRY LINES
</style>
<canvas height="800" width="1200"></canvas> RIGHT WAY -- SHARP LINES
我这样做的方法是将帆布元素设置为CSS中的宽度和高度,然后设置canvas.width = canvas.clientwidth和canvas.height = canvas.clientheight
var canvas = document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");
您尚未指示像素中的帆布尺寸,因此将其缩放。这里是300x150。尝试设置宽度,高度
在视网膜显示上,您还需要扩展(除了接受答案之外):
var context = canvas.getContext('2d');
context.scale(2,2);
这些评论中提到的CSS规模问题是正确的,但是另一个可能导致线模糊的更微妙的事情是忘记打电话给 context.beginPath()
在画线之前。如果不打电话,您仍然会得到一条线,但是它不会平滑,这使得线看起来像一系列步骤。
我发现我的原因是模糊的,是在线宽度和CSS宽度之间存在略有差异。
我既有内联宽度/高度参数,也有分配给画布的CSS宽度/高度,因为我需要保持其物理尺寸静态,同时增加视网膜屏幕的内联尺寸。
如果您有我的情况,请检查您的情况一样。