Javascript 帆布消失
我已经用JS编写了一个简单的脚本。当我将hit放入html文档（在body标记的底部）时，它工作得很好。当我尝试将它放入外部文档并链接它时，脚本运行，但canvas元素消失（刚刚选中：当我将脚本放入底部时，它工作，但不在head标记中）。 此版本适用于：Javascript 帆布消失,javascript,html,canvas,Javascript,Html,Canvas,我已经用JS编写了一个简单的脚本。当我将hit放入html文档（在body标记的底部）时，它工作得很好。当我尝试将它放入外部文档并链接它时，脚本运行，但canvas元素消失（刚刚选中：当我将脚本放入底部时，它工作，但不在head标记中）。 此版本适用于： var c=document.getElementById（“canvasId”）； var ctx=c.getContext（“2d”）； var text=“Nazwa pomiaru”； var-boxWidth=200； var-bo
var c=document.getElementById（“canvasId”）；
var ctx=c.getContext（“2d”）；
var text=“Nazwa pomiaru”；
var-boxWidth=200；
var-boxHeight=200；
var minValue=0；
var maxValue=100；
var midValue=（Math.abs（minValue）+Math.abs（maxValue））/2；
var单位=“%”；
宽度=50；
可变高度=0.6*boxHeight；
var textPosition=0.875；
var leftMargin=0.375；
var topMargin=0.15；
风险值下限=0.75；
var值=Math.floor（Math.random（）*101）；
var warningTop=90；
var dangerTop=95；
var warningBottom=10；
var dangerBottom=5；
var阈值概率=0.6；
var strokeColor=“#cccc”；
var VALUECLOR=“#993333”；
var warningColor=“#ff6600”；
var dangerColor=“#cc0000”；
var textColor=“#000000”；
var textColor2=“#ffffff”；
ctx.beginPath（）；
ctx.fillText（（最大值+单位），（左边距*箱宽-ctx.measureText（最大值+单位）.width-1），（上边距*箱高+3），（箱宽/4））//画一个最大值
ctx.fillText（（中值+单位），（左边距*箱宽-ctx.measureText（中值+单位）.width-1），（上边距+下边距）/2*箱高+3），（箱宽/4））//画一个中值
ctx.fillText（（最小值+单位），（左边距*箱宽-ctx.measureText（最小值+单位）.width-1），（下边距*箱高+3），（箱宽/4））；//绘制一个最小值
ctx.fillText（text，（（boxWidth-ctx.measureText（text.width）/2），（textPosition*boxHeight），（textPosition*boxWidth））//键入文本
ctx.lineWidth=“0”；
ctx.globalAlpha=阈值透射率；
如果（警告顶部！==0 | |警告底部！==0）{
ctx.fillStyle=警告颜色；
ctx.fillRect（（leftMargin*boxWidth），（topMargin*boxHeight），indicWidth，（（100-警告提示）*（indicHeight/100））；//绘制警告提示
ctx.fillRect（（左边距*箱宽），（上边距*箱高+（100-警告底部）*（指示高度/100）），指示宽度，（指示高度-（100-警告底部）*（指示高度/100））；//绘制警告底部
}
如果（危险区！==0 | |危险区！==0）{
ctx.fillStyle=dangerColor；
ctx.fillRect（（leftMargin*boxWidth），（topMargin*boxHeight），indicWidth，（（100-dangerTop）*（indicHeight/100））；//绘制一个dangerTop
ctx.fillRect（（左边距*框宽），（上边距*框高+（100-危险底部）*（指示高度/100）），指示宽度，（指示高度-（100-危险底部）*（指示高度/100））；//绘制危险底部
}
ctx.beginPath（）；
ctx.globalAlpha=1；
ctx.fillStyle=valueColor；
ctx.fillRect（（左边距*箱宽），（上边距*箱高+（100-值）*（indicHeight/100）），indicWidth，（indicHeight-（100-值）*（indicHeight/100））//画一个值指示器
if（value画布（以及整个文档）的原因消失是因为您正在使用document.write。在第一个代码段中，您在文档关闭流之前写入文档。在第二个代码段中，您仅在window.onLoad之后执行该代码，此时文档流关闭
注意：当document.write写入文档流时，在关闭（加载）的文档上调用document.write会自动调用document.open，这将清除文档。
-
解决方案是：
1） 不要使用document.write-如果需要写入文档，请在页面上放置一个HTML元素，然后写入该元素：
// html:
<html>
...
<body>
<p id="output"></p>
</body>
</html>
// Javascript
// ...
var el = document.getDocumentById('output');
el.textContent = value
//html：
...
//Javascript
// ...
var el=document.getDocumentById（'output'）；
el.textContent=值
2） 加载页面后不要调用document.write（就像您在第一个代码段中所做的那样）
就个人而言，我永远不会使用document.write，因为您可能会遇到诸如您描述的内容之类的问题
注意：as document.write写入文档流，调用
document.write在关闭（加载）的文档上自动调用
document.open将清除文档
资料来源：
问题在于覆盖所有主体的文档。写入（值）
为什么?
注意：当document.write写入文档流时，在关闭（加载）的文档上调用document.write会自动调用document.open，这将清除文档
因此，在您的第二次操作中，您将在窗口上执行此操作。onload
调用文档。打开并清除文档。在第一个版本中，您不将其称为onload
控制台中没有任何错误？控制台中没有错误。问题是文档。写入（值）
。如果删除，则它在两个版本中都有效。第二个版本覆盖了所有正文。@Joelalmeda，你应该写下来作为回答。非常感谢。这有帮助。：）