jquery - 无法使用 jQuery 在 HTML5 Canvas 上绘制

标签 jquery html canvas

以下代码不会加载 Canvas 中的绿色矩形。这是我第一次尝试 jQuery(要么它很烂，要么我很烂)，为什么这么简单的东西不起作用，我很困惑。我的网络浏览器是 Firefox 3.6。使用 jQuery 是因为还有另一段 jQuery 驱动的代码可能非常有用...

<html>
<head>
<style type="text/css">
 #canvas {
 border:1px solid black;
 }
</style>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"/>
<script type="text/javascript">
// have also tried
<script type="application/javascript">

  $(function() {
 var canvas = $("#canvas")[0];
 var ctx = canvas.getContext("2d");

 // ctx.clearRect(0,0,300,300);
 ctx.fillStyle = "green";
 ctx.fillRect(0,0,50,50);

 });

</script> 
</head>

<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

最佳答案

使用 jQuery 获取 Canvas 元素将不起作用。您不能在 jQuery 对象上使用 getContext() 方法。而不是:

var canvas = $("#canvas");

您应该使用(如果“draw”是 Canvas 元素的 ID):

var canvas = document.getElementById('draw');

关于jquery - 无法使用 jQuery 在 HTML5 Canvas 上绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3305167/