HTML5 canvas stroke() 粗而模糊 [英] HTML5 canvas stroke() thick and fuzzy
问题描述
我试图让用户在画布上绘制一个矩形(如选择框).我得到了一些荒谬的结果,但后来我注意到,即使只是尝试参考此处中的代码,我得到了巨大的模糊线条,不知道为什么.
I'm trying to allow the user to draw a rectangle on the canvas (like a selection box). I'm getting some ridiculous results, but then I noticed that even just trying the code from my reference here, I get huge fuzzy lines and don't know why.
它托管在 dylanstestserver.com/drawcss.javascript 是内联的,因此您可以查看它.我正在使用 jQuery 来简化获取鼠标坐标的过程.
it's hosted at dylanstestserver.com/drawcss. the javascript is inline so you can check it out. I am using jQuery to simplify getting the mouse coordinates.
推荐答案
由于某种原因,您的画布被拉伸了.因为您将其 css 属性 width
设置为 100%
,所以它会从某种原生大小拉伸它.这是在 标签上使用 css
width
属性和 width
属性之间的区别.您可能想尝试使用一些 javascript 来填充视口(参见 jQuery .width()):
For some reason, your canvas is stretched. Because you have its css property width
set to 100%
, it is stretching it from some sort of native size. It's the difference between using the css width
property and the width
attribute on the <canvas>
tag. You might want to try using a bit of javascript to make it fill the viewport (see jQuery .width()):
jQuery(document).ready(function(){
var canvas = document.getElementById('drawing');
canvas.width(($(window).width()).height($(window).height());
var context = canvas.getContext('2d');
//...
这篇关于HTML5 canvas stroke() 粗而模糊的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!