Question

我有一个CodeIgniter应用程序，允许企业在线完成某些报告。报告的一部分是他们可以在车辆上指明损坏发生的地方。我通过制作一张可以画画的画布来做到这一点。

问题在于，在绘制背景图像（汽车）时会出现一些非常奇怪的行为，在这些图像上绘制箭头以显示影响等...

这是Javascript（作为整个脚本的一部分）：

    var img = new Image();
    img.src = "/intranet/images/car.png";


    context.drawImage(img, 10, 5, img.width, img.height);

这是一个名为vehicle_canvas.js的脚本的所有部分。现在这就是怪异行为的来源。使用

调用此脚本

<script type="text/javascript" src="/intranet/js/vehicle_canvas.js"></script>

位于/intranet/application/views/view_instruction.php

的视图文件中

剧本只是没有绘制车辆图像，但是正确地做了其他所有事情，然后突然间它起作用了，原因是我意外地将vehicle_canvas.js上传到不同的文件夹/ intranet / pdfs /而不是/内联网/ JS /。现在，如果我从/ pdfs /删除脚本，它将无法正常工作。 / pdfs /在我的任何视图文件或Javascript调用中都无处可出现。

有什么想法吗？

以下是文档树供参考：

/intranet/
    /pdfs/ 
    /js/  
        /application/  
            /views/  
                 view_instruction.php

Answer 1

我认为您可能需要将内容恢复到最简单的形式 - 也许是缓存的内容，因此请确保完全刷新等等...

至于图像怪异：也许是因为在你尝试将图像绘制到canvas元素之前图像还没有完全加载。您应该等待页面加载（或更好，图像加载）否则它将失败。类似的东西：

var img = new Image();
img.onload = function(){
  context.drawImage(img, 10, 5, img.width, img.height);
}
img.src = "/intranet/images/car.png";

奇怪的画布绘制行为

1 个答案: