我正在为 Sharepoint 2010 编写 Visual WebPart,我需要使用 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);
但是有错误:
运行时错误 Microsoft JScript:对象不支持属性或方法“getContext”
当我尝试在 ASP.NET Web 应用程序中使用此代码时,它工作正常。怎么了?\
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>