HTML5 Canvas 绘图函数如果未声明为第一个，则会阻止其他 JS 函数答案

【问题标题】：HTML5 Canvas Drawing functions blocks other JS functions if isn't declared as firstHTML5 Canvas 绘图函数如果未声明为第一个，则会阻止其他 JS 函数
【发布时间】：2013-01-30 21:57:24
【问题描述】：

所以我有了这个函数，我用它来画一个三角形来制作一个“漫画云”。无论如何，这是代码：

function drawTriangle(param)
{
var context = document.getElementById("triangle" + param).getContext("2d");

context.shadowColor   = '#111111';
context.shadowBlur    = 1;
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.fillStyle     = '#FFFFFF';
context.lineWidth     = 1;

context.beginPath();
    context.lineTo(16, 0);
    context.lineTo(8, 10);
    context.lineTo(0, 0);
context.closePath();
context.fill();
}

我将这一点声明在 functions.js 中包含的部分然后，在 HTML 文件的末尾，我包含我调用此函数的 script.js 文件：

for(i=1; i<=3; i++)
{
drawTriangle(i);
};

问题是，调用此函数后编写的每个代码都没有被执行。当然，作为最后一个 JS 函数调用也不是问题，但是感觉自己做错了什么让我很烦。

所以有什么想法吗？提示？感谢您的帮助:)

【问题讨论】：

您在控制台中看到任何错误吗？通常，如果某些东西杀死了所有代码执行，那是因为它抛出了一个错误。
另外，这里最可能的错误是它找不到id为triangle1、triangle2或triangle3的元素。你确定这些元素在调用时都在 DOM 中吗？
非常感谢朋友！这就是原因（HTML 中缺少元素）

标签： javascript html canvas path drawing

【解决方案1】：

这里没有问题，但如果这个 document.getElementById("triangle" + param) 返回 null（如果 ID 不存在），那么你就有问题了。

因为没有null.getContext("2d");！

【讨论】：

【解决方案2】：

确保在 .ready from jquery (http://api.jquery.com/ready/) 中运行您的代码，或者在调用 getElementById() 之前以其他方式让您的 DOM 加载。

在将这个标准添加到我的实现之前，我浪费了好几个小时。

【讨论】：