为了账号安全,请及时绑定邮箱和手机立即绑定

难道你们参考老师的代码,浏览器不会报错吗?

<!DOCTYPE>
<html>
<head>
<script>
var balls=[]
var canvas=document.getElementById('Canvas');
var context=canvas.getContext('2d');
window.onload=function(){
canvas.width=1024;
canvas.height=768;

for(i=0;i<10;i++){
var aball={
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
R:Math.random()*50+20
}
balls[i]=aball
}
draw()
canvas.addEventListener('mousemove',detect);

}
function draw(x,y){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<balls.length;i++){
context.beginPath();
context.arc(balls.x,balls.y,balls.R,0,2*Math.PI,false);
if(context.isPointInPath(x,y)){
context.fillStyle='red'
}else{
context.fillStyle='#0090D2'
}
context.fill()
}
}

function detect(event){
var x=event.clientX-canvas.getBoundingClientRect().left;
var y=event.clientY-canvas.getBoundingClientRect().top;

draw(x,y)
}
</script>
</head>
<body>
<canvas id='Canvas' style="margin:50px 400px auto;border:1px solid #ccc"></canvas>
</body>
</html>

我的浏览器报错了,说是 Cannot read property 'getContext' of null  应该是无法获取上下文环境,我知道报错的原因,但不知道如何去解决,我试过把

var canvas=document.getElementById('Canvas');
var context=canvas.getContext('2d');

放到window.onload 里面来,但无济于事。

请大神教我如何解决

正在回答

代码语言

1 回答

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas绘图详解 16</title>
    <style>
      canvas {
        border: 1px solid #aaa;
        display: block;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>

    <canvas id="canvas" width="800" height="800">不好意思,您的浏览器不支持canvas。</canvas>

    <script type="text/javascript">

      var balls = [];
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      window.onload = function() {

        for (var i = 0; i < 10; i++) {
          var ball = {
            x: Math.random() * 800,
            y: Math.random() * 800,
            r: Math.random() * 50 + 20
          };
          balls[i] = ball;
        }

        canvas.addEventListener("mousemove", detect);

      };

      function draw(x, y) {

        for (var i = 0; i < balls.length; i++) {
          ctx.beginPath();
          ctx.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
          if (ctx.isPointInPath(x, y)) {
            ctx.fillStyle = "#ff0000";
          } else {
            ctx.fillStyle = "#058";
          }
          ctx.fill();
        }

      }

      function detect(e) {

        var x = e.clientX - canvas.getBoundingClientRect().left;
        var y = e.clientY - canvas.getBoundingClientRect().top;

        draw(x, y);

      }

    </script>

  </body>
</html>


0 回复 有任何疑惑可以回复我~
#1

慕函数5127544 提问者

所以说js代码要放在canvas的后面吗?浏览器解析的时候对这些会有先后顺序的吗?
2017-12-25 回复 有任何疑惑可以回复我~
#2

Tom_Kwok 回复 慕函数5127544 提问者

<script></script>放在body的尾部可以保证页面中的html元素都已经被解析,这样获取dom元素【如document.getElementById('xxx')】的时候不会出错。​
2017-12-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

难道你们参考老师的代码,浏览器不会报错吗?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信