Функции JavaScript анимации холста и глобальные переменные - PullRequest
0 голосов
/ 15 апреля 2011

Пожалуйста, пусть кто-нибудь поможет мне!Я новичок в JavaScript.Я хочу сделать анимацию холста, используя JavaScript.Но у меня есть следующая ошибка SCRIPT5007: Невозможно получить значение свойства 'getContext': объект имеет значение null или не определено drawing_script.js, строка 31, символ 5 Вот код.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>

Ответы [ 3 ]

3 голосов
/ 15 апреля 2011

Это происходит потому, что вы выполняете сценарий перед созданием холста.

Сначала создайте элемент canvas, а затем вставьте JavaScript.

IE: canvasCircle не определен, потому что вы не можете получить элемент по идентификатору, который еще не существует!

1 голос
/ 17 апреля 2011

Я нашел ответ: init () должна быть функцией init () {s_canvas = document.getElementById ("canvas_square");// Проверяем, поддерживается ли холст и доступен ли getContext if (s_canvas && s_canvas.getContext) {s_context = s_canvas.getContext ("2d");return setInterval (draw, 10);} else {alert ("Canvas не поддерживается!");}} И вызывается из init () заменить на window.onload = init.

0 голосов
/ 15 апреля 2011

Поскольку вы сказали, что вы новичок в javascript, я считаю, что проблема может заключаться в том, что браузер, в котором вы запускаете код, может не поддерживать canvas.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...