canvas动画javascript函数和全局变量

发布于 2024-11-01 05:47:16 字数 1704 浏览 1 评论 0原文

请有人帮助我！我是 JavaScript 新手。
我想使用 javascript 制作画布动画。但我有以下错误

SCRIPT5007：无法获取属性“getContext”的值：对象为空或未定义 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

日记撕了你也走了 2024-11-08 05:47:16

发生这种情况是因为您在创建画布之前执行了脚本。

首先创建 canvas 元素，然后嵌入 javascript。

IE：canvasCircle 未定义，因为您无法通过 ID 获取尚不存在的元素！

回复收藏 0 原文

时间海 2024-11-08 05:47:16

我找到了答案：init()应该是

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!");
    }
}

init()的调用被替换为window.onload=init。

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.

回复收藏 0 原文