Я читаю «Создание изометрических социальных игр в режиме реального времени с HTML5, CSS3 и Javascript».drawImage() не работает
Я не за горами, и я столкнулся с проблемой холста, которая сильно меня поразила в течение большей части дня.
drawImage(), похоже, не является чертежом. Я исследовал проблему и попробовал много перестановок предварительной загрузки изображения, но пока ничего не работает.
Вот мой код:
HTML:
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>
CSS:
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}
и JS:
window.onload = function() {
var canvas = document.getElementById('game');
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
var c = canvas.getContext('2d');
function showIntro() {
var phrase = "Click or tap screen to start";
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, canvas.width, canvas.height);
var logoImg = new Image();
logoImg.src = '../img/logo.png';
var originalWidth = logoImg.width;
logoImg.width = Math.round((50 * document.body.clientWidth)/100);
logoImg.height = Math.round((logoImg.width * logoImg.height)/originalWidth);
var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);
c.font = "bold 16px sans-serif";
var mt = c.measureText(phrase);
var xcoord = (canvas.width/2) - (mt.width/2);
c.fillStyle = '#656565'
c.fillText (phrase, xcoord, 30);
}
showIntro();
}
Любая помощь будет оценен по достоинству!
Это подействовало. Thnx тонна! – Jeremythuff