1

Sharepoint2010用のVisualWebPartを作成していますが、HTML5キャンバスを使用する必要があります。

        document.getElementById("testDiv").innerHTML = '<a href="http://c-blues.com">Right</a>';
        ctx = canvas.getContext("2d");
        cxt.fillStyle="#000000;
        cxt.fillRect(0,0,150,75);

しかし、エラーがあります：

ランタイムエラーMicrosoftJScript：オブジェクトはプロパティまたはメソッド「getContext」をサポートしていません

このコードをASP.NETWebアプリケーションで使用しようとすると<正常に動作します。どうしたの？\

PS：すべてのコード：

<!DOCTYPE HTML>
<style type="text/css">
.clocks {
    height: 500px;
    margin: 25px auto;
    position: relative;
    width: 500px;
}


var canvas;
var ctx;
var clockRadius = 250;
var clockImage;

// функции отрисовки :
function clear() { // очистка
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // основная функция drawScene
    clear(); // очистка канвы

    // получение текущего времени
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // сохранение
    ctx.save();

    // отрисовка часов (как бэк)
    ctx.drawImage(clockImage, 0, 0, 500, 500);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // отрисовка чисел
    ctx.font = '36px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // часы
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // минуты
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // секунды
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

function init() {
    canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        document.getElementById("testDiv").innerHTML = '<a href="http://c-blues.com">Right</a>';
        ctx = canvas.getContext("2d");
       clockImage = new Image();
        //            setInterval(drawScene, 1000);
        cxt.fillStyle="Red";
        cxt.fillRect(0,0,150,75);
    }
    else {
        ctx = canvas.getContext("2d");
        cxt.fillStyle="Green";
        cxt.fillRect(0,0,150,75);
        document.getElementById("testDiv").innerHTML = '<a href="http://c-blues.com">Error</a>';
    }
}
// инициализация
window.onload = init;
</script>

<div class="clocks">
<canvas id="canvas" width="500" height="500">
</canvas>

4

2 に答える 2

1

<canvas>お使いのブラウザはこの要素をサポートしていないようです。投稿したエラーは、オブジェクト (キャンバス) がメソッドをサポートしていないことを示していますgetContext。

お使いのブラウザがcanvas. 実際、答えには、キャンバスがサポートされているかどうかを検出するために使用しようとしているコードが正確に含まれています-あなたの場合、キャンバスはサポートされていないようです:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}
于 2013-01-29T10:29:13.727 に答える
0 
ctx = canvas.getContext("2d");
cxt.fillStyle="#000000;

ctxおよびcxt =)

右

ctx.fillStyle="#000000;
于 2015-01-27T05:54:58.873 に答える