Размер изображения не соответствует размеру холста

Question

Я сделал холст вот так,

<canvas id="mainCanvas" style="width:310px;height:212px;">
</canvas>

Затем попробуйте поместить png на холст в моем скрипте

var canvas=document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var img= new Image();
img.src = "img/player.png";

context.drawImage(img,0,0,310,212);

Мой размер player.png - 312 * 212, такой же, как размер холста.

Однако мой файл png расширен на холсте. Следовательно, правый край и нижний край выступают из полотна.

Почему мой png не подходит ??

html canvas png

2

whitebear 19 Фев 2015 в 19:39

Answer 1

Для всего холста должны быть указаны атрибуты ширины и высоты.

<canvas width="310" height="212"></canvas>

Ширина и высота не должны использовать пиксели. С использованием javascript:

var c = document.querySelector('canvas');
c.width=310;
c.height=212;// as  Ken Fyrstenberg mentioned

Также обязательно дождитесь загрузки изображения.

img.onload(function(){
   //drawimage
});

3

Maciej Paprocki 23 Фев 2015 в 10:10

Answer 2

Вам нужно применять размер как атрибут, а не стили. Попробуй это:

 <canvas id="mainCanvas" width="310" height="212">
 </canvas>

0

Tom Martin 19 Фев 2015 в 16:47

Размер изображения не соответствует размеру холста

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

html