使用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部分也需要这样改动