使用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
同理,height部分也需要這樣改變