奇怪的画布绘制行为

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

我认为您可能需要将内容剥离回最简单的形式 - 可能是缓存的内容，因此请确保进行完全刷新等...

至于图像的怪异：可能是因为图像在您尝试将其绘制到画布元素之前尚未完全加载。您应该等待页面加载（或者更好的是图像加载），否则它将失败。比如：

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