canvas animation javascript functions and global variables

问题

Please, may someone help me! I am new in javascript.
I want to make canvas animation using javascript. But I have the following error

SCRIPT5007: Unable to get value of the property 'getContext': object is null or undefined drawing_script.js, line 31 character 5

Here is the code.

Javascript:

// JScript source code
/*
    Because the canvas can hold only one context at time, we'll create two canvas. Each one with its context.
    One canvas for the circle, and another one for the square.
*/

var canvasCircle;
var contextCircle;
var x = 400;
var y = 300;
var dx = 2;
var WIDTH = 800;
var HEIGHT = 600;

// the circle wont make any transsformation.
function draw_circle(x, y, r) {

    contextCircle.beginPath();
    contextCircle.arc(x, y, r, 0, 2 * Math.PI, true);
    contextCircle.closePath();
    contextCircle.stroke();
}

function clear_canvas() {
    contextCircle.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
    //canvasCircle = document.getElementById("canvas_circle");
    canvasCircle = document.getElementById("canvas_circle");
    contextCircle = canvasCircle.getContext('2d');
    return setInterval(draw, 10);
}

function draw() {
   // clear_canvas();
    draw_circle(x, y, 50);

//    if (x + dx > WIDTH || x + dx < 0)
//        dx = -dx;
//    x += dx;

}
init();

HTML5:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="Scripts/drawing_script.js" language="javascript"></script>
<title>Blackberry</title>
</head>
<body>
  <div class="drawing" style="background:Green">

  <canvas id="canvas_circle" width="800" height="600"></canvas>

回答1:

This is happening because your executing the script before you create the canvas.

Create the canvas element FIRST then embed the javascript.

IE: canvasCircle is undefined because you can't get an element by ID that does not exist yet!

回答2:

I found the answer: the init() should be

function init() {
    s_canvas = document.getElementById("canvas_square");
    // Check if the canvas is supported and if the getContext is available
    if (s_canvas && s_canvas.getContext) {
        s_context = s_canvas.getContext("2d");
        return setInterval(draw, 10);
    }
    else {
        alert("Canvas is not supported!");
    }
}

And the called of init() is replace with window.onload=init.

回答3:

Since you said that you are new to javascript, I believe that the problem could be that the browser on which you are running the code may not be supporting canvas.

来源：https://stackoverflow.com/questions/5679355/canvas-animation-javascript-functions-and-global-variables

标签

javascript

html

canvas