成功了:http://jsfiddle.net/qYYm5/
我最近在这里发现了Kinetic.js:http://www.kineticjs.com/
我试着仿效那个例子,但什么也没用。。。
这段代码应该在“background\u layer”层上绘制一个图像“iPhoneBg.jpg”。不用说,我的形象是存在的。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="Kinetic.min.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script>
window.onload = function() {
//INITIALISATION
var stage = new Kinetic.Stage({
container: "iPhone",
width: 480,
height: 720
});
//LAYERS
var background_layer = new Kinetic.Layer();
var sms_layer = new Kinetic.Layer();
var text_layer = new Kinetic.Layer();
//ELEMENTS
var iPhoneBg_image = new Kinetic.Image({
image: 'iPhoneBg.jpg'
});
//DRAWING
background_layer.add(iPhoneBg_image);
stage.add(background_layer);
};
</script>
</head>
<body>
<canvas id="iPhone" width="480" height="720"></canvas>
</body>
</html>
这里有什么问题?
谢谢!
最佳答案
window.onload = function() { //INITIALISATION var stage = new Kinetic.Stage({ container: "iPhone", width: 480, height: 720 }); //LAYERS var background_layer = new Kinetic.Layer(); var sms_layer = new Kinetic.Layer(); var text_layer = new Kinetic.Layer(); //ELEMENTS var imageObj = new Image(); imageObj.onload = function() { var iPhoneBg_image = new Kinetic.Image({ image: imageObj }); //DRAWING background_layer.add(iPhoneBg_image); stage.add(background_layer); } imageObj.src = "iPhoneBg.jpg"; };<body><div id="iPhone"></div></body>
关于javascript - 我的html5 canvas和Kinetic.js代码无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11955696/