iT邦幫忙

1

請問 canvas 的繪圖的比例問題?

  • 分享至 

  • xImage

假設
我在 640x360 大小的canvas下繪製一條直線 1px (ctx.lineWidth = 1)
當我放大2倍變成 1280x720 這個直線會變粗

但是這個直線跟我直接在
1280x720 大小的canvas下繪製一條直線 1px (ctx.lineWidth = 1) 的觀感不同

當然我能理解
一個是在小的畫布上繪製直線然後放大
跟原本如果就是大的畫布上繪製直線當然不一樣

是否有一種方法可以根據原本的比例重新繪製canvas的內容?

在 1366x768 的畫布下繪製圖像
但最後匯出圖像的時候是 1920x1080 的解析度

直接放大的話
就不像是在 1920x1080 的canvas畫圖的效果

我也不想把 1920x1080 的canvas放到頁面裡因為太佔空間

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1

把 canvas 當成一張圖片。

可以用 1920x1080 的 canvas,呈現在1280x720 的容器內就行了。

你說的是類似這樣嗎?
css設定顯示大小
width,height屬性指定實際大小

<canvas id="annotate" style="width: 960px; height: 540px;" width="1920" height="1080"></canvas>

安全起見,最好只指定單一高或單一寬。讓它保持比例。
指定的寬或高最好用一個div來包。

0
japhenchen
iT邦超人 1 級 ‧ 2020-10-14 16:04:28

固定canvas style width height並不是解決之道,這會讓你的畫布在出現不和諧的畫面比例,建議在window的resize事件裡對canvas重繪,如果你有用jQuery,則

    $(window).on('resize', function(){
        //  重繪畫布
    });

pure javascript

window.addEventListener('resize', function(){
    // 重繪畫布
});

畫布的尺寸由CSS決定,你再用方法取得畫布的實際大小

  let cwidth = canvas.innerHeight;
  let cheight= canvas.innerWidth;

我要發表回答

立即登入回答