尝试加载图像时出错

时间:2013-03-08 09:37:05

标签: javascript html5 canvas kineticjs

Hello stackoverflow社区

我是KineticJS的新手,并且在加载和图像到canvas元素时遇到了一些问题。 如果我运行我的小片段,我会收到此错误:

TypeError:无法将值转换为以下任何值:HTMLImageElement,HTMLCanvasElement,HTMLVideoElement。

但是如何将其转换为所需类型?

它的整个代码:

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
  <div id="container"></div>
  <script src="kinetic-v4.3.1.min.js"></script>
  <script>

  var dia_bg = new Image();
  var dia_bg.src = 'http://www.m133.wallerdeknaller.ch/script/dia_img/bg_diagramm.jpg';

  dia_bg.onload = function() {
   var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
   });

   var layer = new Kinetic.Layer();

   var test = new Kinetic.Rect({
    x: 220,
    y: 50,
    width: 200,
    height: 100,
    fillPatternImage: dia_bg.src,
   });

   layer.add(test);
   stage.add(layer);
  }
  </script>
 </body>
</html>

立即获取任何帮助。

1 个答案:

答案 0 :(得分:1)

  1. 您无需使用var来设置对象的属性。摆脱设置var。{/ li>的dia_bg.src
  2. fillPatternImage: dia_bg.src更改为fillPatternImage: dia_bg
  3. 这里有一个小提琴:http://jsfiddle.net/kcSWA/