首页 > canvas画对角线很模糊

canvas画对角线很模糊

使用canvas画一个div的对角线,先算divwidthheight,再赋给canvaswidthheight,然后建立一个2d画布开始画,为什么画出的斜线很模糊,改成直线就还好?感觉没有被因为div和画布的大小不同而放大或缩小

            var canvasDom = document.querySelector(".canvas_line");
            var w = parseInt($(canvasDom).css("width"));
            var h = parseInt($(canvasDom).css("height"));
            canvasDom.width = w;
            canvasDom.height = h;
            var context = canvasDom.getContext('2d');;
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(w, h);
            context.lineWidth = "1";
            context.strokeStyle = "red";
            context.stroke();

如果你使用的设备太高清了,你可以尝试下这样的操作:

  1. 对canvas使用css样式(style属性)来确定在页面内的高宽

  2. 设置canvas的width和height属性的值为css样式的高宽的2倍

  3. 开始享受你的绘图


楼主你好,你需要在canvas元素里面给width和height属性。如果你在css里面定义canvas的width和height就会出现线条模糊的情况,因此你的更改JS

     原:var w = parseInt($(canvasDom).css("width"));
     改:var w = parseInt($(canvasDom).style("width"));

同理,height部分也需要这样改动


尝试 moveTo(0.5,0.5);


找到一篇文章,希望对你有帮助:HTML5 Canvas 如何取消反锯齿绘图

【热门文章】
【热门文章】