Здравствуйте.
В JS я не силён но - несмотря на это недавно начал пытаться разбираться
в тонкостях HTML5 canvas и по ходу дела столкнулся с определёнными трудностями!
Есть такой код:
|
Код:
|
#canvas{
border-radius:155px;
border:1px solid #CC9933;
margin:10px 0 0 10px;
box-shadow:2px 2px 15px #CC9933;
float:left;
} |
|
Код:
|
<!DOCTYPE html>
<html>
<head>
<link href="style_video.css" type="text/css" rel="stylesheet">
<script type='text/javascript' src="canvas_video.js"></script>
</head>
<body onload="init()" >
<canvas id="canvas" width="1000" height="591">
</canvas>
</body>
</html> |
var canvas, ctx, w, h;
var img;
function init(){
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ctx.clearRect(0,0,w,h);
ctx.strokeStyle="transparent";
ctx.strokeRect(0,0,w,h);
image();
}
function image(){
var img = new Image();
img.src = 'images/girl_elf.jpg';
img.onload = function(){
ctx.drawImage(img,0,0,440,591);
}
}
Он работает нормально!
Но! Как только я переопределяю 21-ю строчку JS кода в новую функцию - это дело перестаёт работать!?
var canvas, ctx, w, h;
var img;
function init(){
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ctx.clearRect(0,0,w,h);
ctx.strokeStyle="transparent";
ctx.strokeRect(0,0,w,h);
image();
}
function image(){
var img = new Image();
img.src = 'images/girl_elf.jpg';
img.onload = function(){
my_draw();
}
}
function my_draw(){
ctx.drawImage(img,0,0,440,591);
}
Здесь не работает строка 26!?
Кто нибудь может объяснить почему это происходит?
P.S. Прохожу сейчас урок одного гуру и у него такой код срабатывает:
(если я ничего не упустил из виду..)
Это видно на скрине:
