HTML5画布笔画()粗而模糊

Question

我试图让用户在画布上绘制一个矩形(如选择框).我得到了一些可笑的结果,但后来我发现,从我的参考,甚至只是想代码在这里,我得到巨大的模糊线,不知道为什么.

它托管在dylanstestserver.com/drawcss.javascript是内联的,所以你可以检查出来.我正在使用jQuery来简化鼠标坐标.

Answer 1

如果使用css设置画布高度和宽度而不是在canvas元素中设置高度和宽度,则会出现模糊问题.

<style>
  canvas { height: 800px; width: 1200px; }      WRONG WAY -- BLURRY LINES
</style>

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES

Answer 2

出于某种原因,你的画布被拉伸了.因为你将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');
    //...

Answer 3

我这样做的方法是将canvas元素设置为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");