成功了: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/

10-13 03:46