画布 JavaScript 问题

Question

我被要求开发一个将在黑莓上运行的应用程序。但我不懂java。由于应用程序需要绘图，所以我选择了 html5 和 javascript。然后我读了一些javascript教程。但是当我尝试将其付诸实践时，我收到错误消息，指出“getContext”属性未定义。 可以用c#写吗？

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

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

Answer 1

我不熟悉您使用的 Blackberry 浏览器，但它似乎不支持 Canvas。 Dive Into HTML5 有一个关于功能检测的精彩章节：http://diveintohtml5.ep.io/detect.html< /a>

它还有一个名为 Modernizr 的不错的库，您可以使用它来检测 HTML5 功能。但检查画布支持非常简单（如本章所示）：

 function supports_canvas() {
     return !!document.createElement('canvas').getContext;
 }