css3 - canvas画对角线很模糊

Question

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

            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();

Answer 1

If the device you are using is too high-definition, you can try this:

1. Use css style (style attribute) on canvas to determine the height and width within the page

2. Set the width and height attributes of the canvas to 2 times the height and width of the css style

3. Start enjoying your drawing

Answer 2

Try moveTo(0.5,0.5);

Answer 3

I found an article that I hope will be helpful to you: How to cancel anti-aliased drawing in HTML5 Canvas

Answer 4

Hello, you need to set the width and height attributes in the canvas element. If you define the width and height of canvas in css, the lines will be blurred, so your change JS

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

Similarly, the height part also needs to be changed in this way