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部分也需要這樣改動