假設
我在 640x360 大小的canvas下繪製一條直線 1px (ctx.lineWidth = 1)
當我放大2倍變成 1280x720 這個直線會變粗
但是這個直線跟我直接在
1280x720 大小的canvas下繪製一條直線 1px (ctx.lineWidth = 1) 的觀感不同
當然我能理解
一個是在小的畫布上繪製直線然後放大
跟原本如果就是大的畫布上繪製直線當然不一樣
是否有一種方法可以根據原本的比例重新繪製canvas的內容?
在 1366x768 的畫布下繪製圖像
但最後匯出圖像的時候是 1920x1080 的解析度
直接放大的話
就不像是在 1920x1080 的canvas畫圖的效果
我也不想把 1920x1080 的canvas放到頁面裡因為太佔空間
把 canvas 當成一張圖片。
可以用 1920x1080 的 canvas,呈現在1280x720 的容器內就行了。
固定canvas style width height並不是解決之道,這會讓你的畫布在出現不和諧的畫面比例,建議在window的resize事件裡對canvas重繪,如果你有用jQuery,則
$(window).on('resize', function(){
// 重繪畫布
});
pure javascript
window.addEventListener('resize', function(){
// 重繪畫布
});