如何改變canvas的比例

canvas

greenriver 2022-07-19 17:02:20 ‧ 854 瀏覽

大家好，
我想請問大家都是怎麼動態改變canvas的比例呢?

像是我有一個chart.js的長條圖，在初始值，就先給個比例

var canvas = document.getElementById("myChart");
canvas.width = 100;
canvas.height = 30;

但是手機版時，如果還維持100:30的比例，圖就會擠在一起，如下圖

所以我想監控螢幕大小，隨螢幕大小去改變比例，
像是使用瀏覽器縮放時，可以從電腦版(100:30)縮放成手機版(100:100)。
然後再從手機版縮放，又能回到電腦版的比例。

但好像沒那麼方便去更改。
還要先清除原本的畫布，再創建新的畫布。
如果是用瀏覽器，要不斷清除跟創建，好像又會遇到id衝突的問題?

想請問有甚麼比較方便的方法呢?
目前我是直接放兩個圖，一個hidden，一個display..

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

阿展展展

iT邦好手 1 級 ‧ 2022-07-19 22:55:40

object-fit: cover;

但是他還是只能等比例縮放，當兩個版面長寬不一致時看起來還是會怪怪的

I code so I am

iT邦高手 1 級 ‧ 2022-07-20 08:21:48

可使用%。

canvas.width = '100%';
canvas.height = '100%';

立即登入回答