<html>
<head></head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas')
if (canvas == null)
return false;
var context = canvas.getContext("2d");
//实践表明在不设施fillStyle下的默认fillStyle=black
context.fillRect(0, 0, 100, 100);
//设置纯色
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
context.fillStyle = "red";
context.fillRect(240,0 , 100, 100);
context.fillStyle = "rgba(255,0,0,0.2)";
context.fillRect(240, 120, 100, 100);
</script>
</body>
</html>
估计你刚学javascript吧,return不能用在“外部”。return需要在“函数内部”。
function test() {var canvas = document.querySelector('canvas');
if (!canvas) alert('浏览器不支持');
console.log(canvas)
}
test()
<html>
<head></head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
function create() {
var canvas = document.getElementById('myCanvas')
if (canvas == null) return false;
var context = canvas.getContext("2d");
//实践表明在不设施fillStyle下的默认fillStyle=black
context.fillRect(0, 0, 100, 100);
//设置纯色
context.fillStyle = "rgba(255,0,0,0.2)";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
//设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
context.fillStyle = "red";
context.fillRect(240,0 , 100, 100);
context.fillStyle = "rgba(255,0,0,0.2)";
context.fillRect(240, 120, 100, 100);
}
create()
</script>
</body>
</html>追问
但是在另外一台电脑上就运行出来了。。