javascript - 如何消除canvas邊緣鋸齒
問題描述
如題:我做了一個canvas圖形,出現(xiàn)了邊緣鋸齒
有搜到一個:Bicubic Interpolation的插值算法,但是看不懂,請大神指點Orz!!
問題解答
回答1:可以先試試將canvas的分辨率提高一倍看一看。假設顯示大小為 w * h:
將canvas的width和height設為2w和2h
將canvas的style中的width和height設為w和h
回答2:我看了一些比較好的插件,如echarts(百度圖表),但是1萬多行代碼,實在是看不了,最后找到了一個解決方法https://www.zhihu.com/questio...let width = canvas.width,height=canvas.height;if (window.devicePixelRatio) {
canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; canvas.height = height * window.devicePixelRatio; canvas.width = width * window.devicePixelRatio; ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}謹此分享給遇到同樣問題的童鞋
相關文章:
1. 點擊頁面就自動輸入到mysql.求解2. java - IDEA從SVN檢出項目 并在tomcat上運行 求詳細流程3. node.js - nodejs使用formidable上傳文件問題4. javascript - windos下第一次用Django無法正確創(chuàng)建工程目錄5. java - 多叉樹求值,程序高手,算法高手看過來6. node.js - 帶有node_modules目錄的項目,用phpstorm打開速度極慢,怎么解決?7. JAX-RS,GlassFish,Eclipse。簡單的Web服務不起作用8. java如何生成token?9. 單擊登錄按鈕無反應10. 靜態(tài)資源文件引入無效
