<Doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="400px" heigth="400px"> please download chrome</canvas>
<script>
let canvas=document.getElementById("canvas1");
if(!canvas){
throw new Error("no canvas");
//return;
console.log(canvas);
return;
}
//获取canvas上下文
let ctx=canvas.getContext("2d");
//设置填充颜色
ctx.fillStyle="rgba(255,0,0,0.5)";
//绘制矩形
ctx.fillRect(100,100,200,200);
// function main(){
// //获取cavas节点
// }
// main();
</script>
</body>
</html>
会一直报错
这么简单的问题都能报错。
解决办法,将带有return的语句需要放在函数里,改成如下
<Doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="400px" heigth="400px"> please download chrome</canvas>
<script>
function main(){
//获取cavas节点
let canvas=document.getElementById("canvas1");
if(!canvas){
throw new Error("no canvas");
//return;
console.log(canvas);
return;
}
//获取canvas上下文
let ctx=canvas.getContext("2d");
//设置填充颜色
ctx.fillStyle="rgba(255,0,0,0.5)";
//绘制矩形
ctx.fillRect(100,100,200,200);
}
main();
</script>
</body>
</html>
计划:最近一周熟悉一下webgl的知识