在HTML5 Canvas中添加圖像時，KineticJs出現未捕獲的類型錯誤

Question

我試圖在畫布上添加圖像並使用Kinetic.js庫，但控制台上出現錯誤

Uncaught TypeError: Type error

我的代碼是：

JS小提琴

的HTML

<!DOCTYPE HTML>

設計

#wrapper{
width:300px;
height:200px;
margin:auto;
border-radius: 15px;
border: 4px solid black;
}

#container{
height:120px;
width:100%;
border:1px solid red;
}
#items, #cliparts{
height:55px;
border:1px solid green;
width:100%;
}

#items img, #cliparts img {
max-height:50px;
max-width:40px;
padding: 0 5px;
border:2px double white;
}
#items img:hover,  #cliparts img:hover{
border:2px double blue;
cursor:pointer;
}

JavaScript的

document.getElementById('clip1').addEventListener('click', function() {
                 var stage = new Kinetic.Stage({
                  container: "container",
                  width: 300,
                  height: 100
                });

                 var layer = new Kinetic.Layer();


             var clip_group = new Kinetic.Group({
                  x: 200,
                  y: 30,
                  draggable: true,
               });

            var image_src = 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';

            var clip_image = new Kinetic.Image({
                  x: 0,
                  y: 0,
                  image: image_src,
                  width: 150,
                  height: 138,
                  name: "image",
                });




            clip_group.add(clip_image);
            layer.add(clip_group);
            stage.add(layer);
            stage.draw();               
         });

Answer 1

Kinetic.Image的image屬性必須是圖像對象，而不是url字符串。 這是一個例子：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

在HTML5 Canvas中添加圖像時，KineticJs出現未捕獲的類型錯誤

問題描述

1 個解決方案

解決方案1
3 已采納 2012-12-18 03:52:22

在HTML5 Canvas中添加圖像時，KineticJs出現未捕獲的類型錯誤

問題描述

1 個解決方案

解決方案1 3 已采納 2012-12-18 03:52:22

解決方案1
3 已采納 2012-12-18 03:52:22