canvas drawImage обрезает большие картинки
Здравствуйте, у меня проблема с 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)
}
}
}
}
|
bona,
задайте размер для встраиваемой картинки - строка 17 :write:
<!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>
|
Да и без него норм, 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">
|
Aetae,
спасибо за помощь, проблема оказалась в том, что у меня width и height были заданы в css, а у вас прямо в html. |
Цитата:
|
| Часовой пояс GMT +3, время: 15:05. |