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％，它从某种原生大小拉伸。在< canvas>上使用css width 属性和 width ; 标记。您可以尝试使用一些javascript来填充视口（ see jQuery .width（））： p>

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屋！