鍍金池/ 問答/HTML5  HTML/ canvas模擬繪畫,畫出來的線條很糙,如何抗鋸齒?

canvas模擬繪畫,畫出來的線條很糙,如何抗鋸齒?

onmousemove()捕捉鼠標(biāo)坐標(biāo),lineTo()繪制線條,繪制出的線條鋸齒嚴(yán)重.見圖中,綠圈局部.有什么方法可以抗鋸齒嗎?在繪圖軟件中繪制相同粗細(xì)線條就很流暢,求解答?
圖片描述

與ps中繪制,對比明顯
圖片描述

回答
編輯回答
玄鳥

通過css修改寬高就會出現(xiàn)拉伸的情況，從而出現(xiàn)鋸齒。canvas的寬度與高度必須作為屬性來操作，而非css。
解決方案：

  1. 在繪制之前設(shè)置好canvas的width和height。
  2. 不要通過css改變元素的width和height。如果要修改寬高，可以通過js修改canvas.widht和canvas.height。
2017年10月5日 02:41
編輯回答
笨小蛋
ctx.strokeStyle="#000";
ctx.stroke();
2018年7月4日 08:50