Форум

bona · #1 (**permalink**) 24.03.2014, 14:13

Здравствуйте, у меня проблема с canvas. Метод drawImage рисует не полное изображение, а фрагмент. Большие картинки обрезаются примерно до 300*150. Если увеличить ширину блока canvas, фрагмент просто растянется и все. Это нормально, или я что-то делаю не так? Как исправить? Вот мой код:

window.onload = function() {
var test=document.getElementById('test');
if (test && test.getContext) {
var context = test.getContext('2d');
if (context) {
var parkBg=new Image();
parkBg.src='park-bg.png';
parkBg.onload=function(){
context.drawImage(parkBg,0,0)
}
}
}
}

рони · #2 (**permalink**) 24.03.2014, 14:26

bona,
задайте размер для встраиваемой картинки - строка 17

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 window.onload = function () {
         var test = document.getElementById('test');
         if (test && test.getContext) {
             var context = test.getContext('2d');
             if (context) {
                 var parkBg = new Image(300, 150);
                 document.body.appendChild(parkBg);//для теста
                 parkBg.onload = function () {
                     context.drawImage(parkBg, 0, 0, 300, 150)
                 }
                 parkBg.src = 'http://tn.new.fishki.net/26/upload/post/201403/20/1253073/019.jpg';
             }
         }
     }
  </script>
</head>

<body>
 <canvas id="test"></canvas>
</body>

</html>

Aetae · #3 (**permalink**) 24.03.2014, 14:30

Да и без него норм, xз в чём проблема:

<script>
window.onload = function() {
	var test=document.getElementById('test');
	if (test && test.getContext) {
		var context = test.getContext('2d');
		if (context) {
			var parkBg=new Image();
			parkBg.src='http://fc06.deviantart.net/fs70/f/2014/082/3/d/17_by_fxgraphics-d7bbg06.jpg';
			parkBg.onload=function(){
				context.drawImage(parkBg,0,0)
			}
		}
	}
}
</script>
<canvas id="test" width="3000" height="2000">

bona · #4 (**permalink**) 24.03.2014, 15:07

Aetae,
спасибо за помощь, проблема оказалась в том, что у меня width и height были заданы в css, а у вас прямо в html.

Aetae · #5 (**permalink**) 25.03.2014, 13:15

Сообщение от bona

Aetae,
спасибо за помощь, проблема оказалась в том, что у меня width и height были заданы в css, а у вас прямо в html.

Не стоит путать css и атрибуты. В отличие от img в canvas они выполняют разную роль.)

Форум

Справочник

Discord чат

Курсы javascript