Question

我正在尝试使用JavaScript和jQuery构建一个突出显示库。本周我只是潜入Canvasing技术，并没有发现它们都那么困难。但是，在今天工作时，我的代码已停止工作。我知道我可能只是遗漏了一些显而易见的东西但是我已经被困了这么近2个小时了，我需要让这个项目再次前进。任何帮助将不胜感激。

$(function() {
  $('area').click(function(event) {
    event.preventDefault();
    document.getElementById("ctx").getContext("2d").fillStyle = "#FF0000";
    document.getElementById("ctx").getContext("2d").fillRect(0, 0, 200, 200);
  } );
} );

我之前只包含了我的Javascript，因为这是我最近一直在改变的事情。

Answer 1

您的代码适用于我，假设：

该网页包含可点击的area。
该网页的画布的#id为ctx。

确保您的设置确实有两件事......

你的canvas元素的#id是ctx吗？这不是致命的，但是canvas元素包含context，所以它有点误导。

如果您有这样的canvas元素：

<canvas id=canvas></canvas>

然后你可以像这样得到画布上下文的可重用引用：

// no need to constantly get a context reference ...
//     just do it once at the start of your app
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');

您可以重复使用该上下文引用来执行所有绘图调用：

context.fillStyle='red';
context.fillRect(0,0,200,200);

无法通过Canvas

1 个答案: