Javascript 如何有条件地将不同背景应用于画布
这里显示的代码可能对其他人有用：它显示了我提出的解决方案，我必须有条件地将不同的背景图像应用于画布。关于如何实现这一点或其变体的问题在此之前已经提出过 （很抱歉我的编辑拙劣。我最初是将此作为一个问题发布的，然后，在阅读我发布的代码时，我意识到了答案，所以我删除了该部分。我当时不知道已经有两个答案，这对没有看到原始问题的人来说毫无意义。因此，总结一下：我无法工作我的函数调用无法访问我添加到其他人发布的代码中的函数。我没有意识到我插入它们的代码是“包装”在匿名IFFE函数中的。当我将它们移动到“包装器”末端以下时，我可以从IFFE外部调用它们。） 感谢javinor提供了那篇解释IFFE函数的内容丰富的文章的链接 至于下面所示的方法，我已经找到了一种更好的方法。我了解到div元素实际上不属于HTML head部分，因此这是一种更好的方法：Javascript 如何有条件地将不同背景应用于画布,javascript,html,Javascript,Html,这里显示的代码可能对其他人有用：它显示了我提出的解决方案，我必须有条件地将不同的背景图像应用于画布。关于如何实现这一点或其变体的问题在此之前已经提出过 （很抱歉我的编辑拙劣。我最初是将此作为一个问题发布的，然后，在阅读我发布的代码时，我意识到了答案，所以我删除了该部分。我当时不知道已经有两个答案，这对没有看到原始问题的人来说毫无意义。因此，总结一下：我无法工作我的函数调用无法访问我添加到其他人发布的代码中的函数。我没有意识到我插入它们的代码是“包装”在匿名IFFE函数中的。当我将它们移动到“包装
var lnk;
lnk = document.createElement('LINK');
lnk.rel = 'stylesheet';
lnk.type = 'text/css';
lnk.href = 'CanvasStylesA.css';
document.getElementsByTagName('head')[0].appendChild(lnk);
<head>
<div id="conditionalCSSincludes">
<!--
The javascript below will insert an inner div section here called "CanvasStyles", which
will, conditionally, contain one of the following two lines. That line will link to one of
two external style sheets containing the canvas style for the canvas displayed by this page.
<link rel="stylesheet" type="text/css" href="CanvasStylesA.css">
<link rel="stylesheet" type="text/css" href="CanvasStylesB.css">
The two style sheets differ with respect to the background image set for Canvas1.
A sets it to A.jpg, B sets it to B.jpg.
-->
</div>
<script src="code.js" type="text/javascript"></script>
<!-- the javascript below goes here -->
</head>
<body>
<canvas width="530" height="530" id="Canvas1">
<p>This page will not display correctly because your browser does not support the canvas element. Sorry.</p>
</canvas>
</body>
此页面将无法正确显示，因为您的浏览器不支持画布元素。抱歉
<script type="text/javascript">
var includesDiv1, includesDiv2, includesDiv3, dt, hour, Bgnd;
// Conditional code that, depending on page load time, chooses
// whether to display the night-time or daytime background
dt = new Date();
hour = dt.getHours();
// for testing, enable the line below and set the hour manually ...
// hour = 6;
if (hour < 6 || hour >= 18){Bgnd = 1;} else{Bgnd = 2;}
// These are the two versions of the include link to the external style sheets:
includesDiv1 = '<div id="CanvasStyles"> <link rel="stylesheet" type="text/css" href="CanvasStylesA.css"> </div>';
includesDiv2 = '<div id="CanvasStyles"> <link rel="stylesheet" type="text/css" href="CanvasStylesB.css"> </div>';
if (Bgnd==1){
includesDiv3 = includesDiv1; // use the night-time background image
}
else{
includesDiv3 = includesDiv2; // use the daytime background image
}
// Insert into the conditionalCSSincludes div above an inner div called "canvasStyles".
// It contains an html include link to an external css file containg canvas styles.
cssIncludesDiv = document.getElementById("conditionalCSSincludes");
cssIncludesDiv.innerHTML = includesDiv3;
var包括1，包括2，包括3，dt，小时，Bgnd；
//根据页面加载时间选择的条件代码
//显示夜间还是日间背景
dt=新日期（）；
小时=dt.getHours（）；
//对于测试，请启用下面的行并手动设置小时。。。
//小时=6；
如果（小时<6 | |小时>=18）{Bgnd=1；}否则{Bgnd=2；}
//以下是指向外部样式表的include链接的两个版本：
includesDiv1=''；
includesDiv2=''；
如果（Bgnd==1）{
includesDiv3=includesDiv1；//使用夜间背景图像
}
否则{
includesDiv3=includesDiv2；//使用日间背景图像
}
//在名为“canvasStyles”的内部div上方插入ConditionalCSIncludes div。
//它包含一个html包含链接，指向包含画布样式的外部css文件。
cssIncludesDiv=document.getElementById（“ConditionalCSIncludes”）；
cssIncludesDiv.innerHTML=includesDiv3；
window.startClock = startClock;
window.stopClock = stopClock;
对您的三个函数执行此操作，这样它们将在全局（窗口）范围内可用。当按下按钮时，
（函数（）{}（））请看一看关于模块和名称空间的非常有启发性的解释。对我来说，一切都是未定义的。那么，如果您想获得帮助，请用问题总结您的问题。
显示此消息（function（）{}（））window.yourFunctionName = yourFunctionName