画布动画javascript函数和全局变量_Javascript_Html_Canvas

画布动画javascript函数和全局变量

javascript html canvas

画布动画javascript函数和全局变量,javascript,html,canvas,Javascript,Html,Canvas,求你了，谁能帮帮我！我是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. E

求你了，谁能帮帮我！我是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();

<!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>

//JScript源代码
/*
因为画布一次只能容纳一个上下文，所以我们将创建两个画布。每一个都有它的上下文。
一张画布画圆，另一张画正方形。
*/
var游说团；
var语境圈；
var x=400；
变量y=300；
var-dx=2；
var宽度=800；
var高度=600；
//圆圈不会进行任何转换。
函数绘制圆（x，y，r）{
contextCircle.beginPath（）；
弧（x，y，r，0，2*Math.PI，true）；
contextCircle.closePath（）；
contextCircle.stroke（）；
}
函数clear_canvas（）{
clearRect（0，0，宽度，高度）；
}
函数init（）{
//canvasCircle=document.getElementById（“canvas_circle”）；
canvasCircle=document.getElementById（“canvas_circle”）；
contextCircle=canvasCircle.getContext（'2d'）；
返回设置间隔（抽签，10）；
}
函数绘图（）{
//清除画布（）；
画一个圆（x，y，50）；
//如果（x+dx>宽度| | x+dx<0）
//dx=-dx；
//x+=dx；
}
init（）；

HTML5:

// 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();

<!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>


黑莓

既然您说您是javascript新手，我相信问题可能是您运行代码的浏览器可能不支持画布

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

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

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

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

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

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

我找到了答案：

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（）

被替换为

窗口。onload=init

我找到了答案：

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

如何？因为我在html中声明画布。如何声明？因为我在html中声明画布，我不这么认为。因为另一个使用canvas的例子运行良好，我不这么认为。因为另一个使用canvas的示例运行良好。