Как увеличить изображение Canvas HTML без потери разрешения? - PullRequest
Новая
       66

Как увеличить изображение Canvas HTML без потери разрешения?

0 голосов
/ 27 мая 2020

Размер моего холста 300x150. Я не хочу устанавливать размеры больше, потому что я бы хотел, чтобы они подходили и для мобильных телефонов. Но я бы хотел, чтобы он масштабировался на больших телефонах, iPad и ноутбуках без потери разрешения. Разрешение моих картинок на холсте в целом было плохим, а когда оно увеличивается, оно становится еще хуже. Не знаю, как решить эту проблему. Спасибо. https://jsfiddle.net/uwakcgv0/

Вот HTML: 

<canvas width="300" height="150" id="myCanvas"></canvas>

Вот Javascript: 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 300, 150);
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 130);
ctx.lineTo(130, 130);
ctx.stroke();
ctx.fillText("y",18,15);
ctx.fillText("x",135,132);

1 Ответ

2 голосов
/ 27 мая 2020

Увеличьте размер холста на любой коэффициент, а затем масштабируйте холст с тем же коэффициентом (используя ctx.scale()), чтобы получить желаемый результат. 

const SCALING_FACTOR = 2;
    
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.canvas.width = SCALING_FACTOR * canvas.width;
ctx.canvas.height = SCALING_FACTOR * canvas.height;

ctx.scale(SCALING_FACTOR, SCALING_FACTOR);

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 130);
ctx.lineTo(130, 130);
ctx.stroke();
ctx.fillText("y", 18, 15);
ctx.fillText("x", 135, 132);
<canvas width="300" height="150" id="myCanvas"></canvas>
...