一、document.getElementById返回为null
今天准备学习下canvas画图，于是呢写了如下代码：
canvas.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/canvas.js" ></script>
<title id="test-canvas">Canvas</title>
</head>
<body>
<canvas id="test-canvas" width="400px" height="600px"></canvas>
</body>
</html>canvas.js
var cvs = document.getElementById("testcanvas");
if (cvs.getContext) {
alert('你的浏览器支持Canvas!');
} else {
alert('你的浏览器不支持Canvas!');
}
var canvas = cvs.getContext("2d");
canvas.fillStyle ="#dd22dd";
canvas.fillRect(30,30,300,300);
刷新界面报如下错误，说明 cvs是null的。我在想啊，Id我是拷贝过来的，不可能是id值的问题。
原来是因为，我们习惯于js文件放在head标签中加载的，而HTML文件是从上到下顺序执行的，所以当然就找不到相对应的元素了。
解决方法：1.在<\script>中添加defer=”true” 属性，延迟加载。
2. 把你的js片段或者加载文件放到<\body>标签结束之后
二、循环中的局部变量，每次使用该值时，都是循环结束时的最后的那个值。
下面举个列子：我要实现动态创建表格的功能，并在点击每个表格时，输出每个表格中的数字和颜色信息。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/tab.js" ></script>
<title>动态表格</title>
</head>
<body>
<h5 style="display:inline;">行数</h5> <input id="rows" style="color: black;width: 100px;height: 20px;"/>
<h5 style="display:inline;">列数</h5> <input id="cels" style="color: black;width: 100px;height: 20px;"/>
<input type="button" value="生成表格" onclick="createTable()" style="width: 60px; height: auto;"/>
<br />
<h4 id="info"></h4>
<table id="tab" cellspacing="2" cellpadding="15"></table>
</body>
</html>js代码：
function createTable() {
var rows = document.getElementById("rows");
var cels = document.getElementById("cels");
var table = document.getElementById("tab");
var colors = ["red", "green", "royalblue", "yellow", "pink", "blue", "aqua", "brown"];
while(table.childElementCount > 0) {
table.removeChild(table.children[0]);
}
if(!checkNumber(rows.value)||!checkNumber(cels.value)||parseInt(rows.value) <= 0 || parseInt(rows.value) > 100 || parseInt(cels.value) <= 0 ||parseInt(cels.value) > 100) {
alert("请输入1到100之间的数字，谢谢合作！");
return
}
for(var i = 0; i < rows.value; i++) {
var tr = document.createElement("tr");
tr.setAttribute("valign", "center");
for(var j = 0; j < cels.value; j++) {
var td = document.createElement("td");
var ran = Math.floor(Math.random() * colors.length);
td.setAttribute("bgcolor", `${colors[ran]}`);
td.setAttribute("align", "center");
td.innerText = (Math.random() * 100 + 1).toFixed(0);
var num = td.innerText;
var color = td.getAttribute("bgcolor");
td.onclick = function(){
var textInfo = document.getElementById("info");
textInfo.innerHTML = `您选择的区域的数字是: ${num},颜色为 ${color}.`
}
tr.appendChild(td);
}
table.appendChild(tr);
}
}
//验证字符串是否是整数
function checkNumber(theObj) {
var reg = /^[0-9]+$/;
if (reg.test(theObj)) {
return true;
}
return false;
}运行结果如下：
不管我点击表格中的哪一个，都是显示的最后一个方格，数字都是67，颜色为pink.
原来js中没有块作用域。那如何解决这个坑呢？
这就用到函数的闭包了：
function createTable() {
var rows = document.getElementById("rows");
var cels = document.getElementById("cels");
var table = document.getElementById("tab");
var colors = ["red", "green", "royalblue", "yellow", "pink", "blue", "aqua", "brown"];
while(table.childElementCount > 0) {
table.removeChild(table.children[0]);
}
if(!checkNumber(rows.value)||!checkNumber(cels.value)||parseInt(rows.value) <= 0 || parseInt(rows.value) > 100 || parseInt(cels.value) <= 0 ||parseInt(cels.value) > 100) {
alert("请输入1到100之间的数字，谢谢合作！");
return
}
for(var i = 0; i < rows.value; i++) {
var tr = document.createElement("tr");
tr.setAttribute("valign", "center");
for(var j = 0; j < cels.value; j++) {
var td = document.createElement("td");
var ran = Math.floor(Math.random() * colors.length);
td.setAttribute("bgcolor", `${colors[ran]}`);
td.setAttribute("align", "center");
td.innerText = (Math.random() * 100 + 1).toFixed(0);
var num = td.innerText;
var color = td.getAttribute("bgcolor");
var fclick = function(num,color){
td.onclick = function(){
var textInfo = document.getElementById("info");
textInfo.innerHTML = `您选择的区域的数字是: ${num},颜色为 ${color}.`
}
}
fclick(num,color);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
//验证字符串是否是整数
function checkNumber(theObj) {
var reg = /^[0-9]+$/;
if (reg.test(theObj)) {
return true;
}
return false;
}
把值传入进函数中，就不会有问题了！
三、canvas.drawImage() 没效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>让你的图片变灰白</title>
<script type="text/javascript" src="../js/canvas.js" defer="true"></script>
</head>
<body>
<img src="..\img\sky.jpeg" width="665px"height="500px"/>
<canvas id="image_gray" width="665px" height="500px" style="background: ghostwhite;"></canvas>
</body>
</html>
究其原因就是图片还没加载出来就调用了此方法，拿不到数据，所以也就画不出来，可是编译器不报错。。。
解决方法是：
image.onload =function(){
canvas.drawImage(image,0,0,665,500);
}在图片加载完成后，再去画。