css3 - canvas画对角线很模糊
大家讲道理
大家讲道理 2017-04-17 11:20:52
0
4
599

使用canvas画一个p的对角线,先算pwidthheight,再赋给canvaswidthheight,然后建立一个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();
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回覆(4)
大家讲道理

如果你使用的設備太高清了,你可以嘗試下這樣的操作:

  1. 對canvas使用css樣式(style屬性)來決定頁面內的高寬

  2. 設定canvas的width和height屬性的值為css樣式的高寬的2倍

  3. 開始享受你的繪圖

左手右手慢动作

試試 moveTo(0.5,0.5);

PHPzhong

找到一篇文章,希望對你有幫助:HTML5 Canvas 如何取消反鋸齒繪圖

PHPzhong

樓主你好,你需要在canvas元素裡面給width和height屬性。如果你在css裡面定義canvas的width和height就會出現線條模糊的情況,因此你的更改JS

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

同理,height部分也需要這樣改變

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板