css3 - canvas画对角线很模糊

问题描述

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

问题解答

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

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

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

开始享受你的绘图

尝试 moveTo(0.5,0.5);

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

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

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

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