Can't draw on HTML5 canvas using jQuery
The following code won't load the green rectangle in the canvas. This is my very first time trying out jQuery (either it sucks or me sucks), why such a simple thing is not working, I'm baffled. My web browser is Firefox 3.6. Playing with jQuery because there's another jQuery-driven piece of code that could be quite useful...
<html>
<head>
<style type="text/css">
#canvas {
border:1px solid black;
}
</style>
<script type="text/javasc开发者_如何学编程ript" 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>
Getting the canvas element by using jQuery won't work. You can't use the getContext() method on the jQuery object. Instead of:
var canvas = $("#canvas");
You should use (if "draw" was the ID of the canvas element):
var canvas = document.getElementById('draw');
Try this:
<script type="application/javascript">
$(document).ready(function() {
var canvas = $("#canvas")[0];
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Choose a color
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.fillRect(0, 0, 50, 50);
} else {
// Browser doesn't support CANVAS
}
});
</script>
That should work as expected. I suspect you were missing the $(document).ready() bit.
Don Don,
You need to make two small changes.
First remove the [0] from this line,
var canvas = $("#canvas")[0]
Second, take that [0] and add it to the if statement,
if (canvas[0].getContext) {
And add it to the assignment of ctx
var ctx = canvas[0].getContext("2d");
Alternatively assign it to a variable before you test for it.
var canvas = $("#canvas"), ctx = canvas[0].getContext("2d");
if (ctx) {
And you should be good to go...
You should close the canvas tag and as Nick already said, you should definitely use the jQuery $(document).ready() function:
<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">
$(document).ready(function() {
var canvas = $("#canvas")[0];
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Choose a color
ctx.fillStyle = "#000000";
ctx.strokeStyle = "#000000";
ctx.fillRect(0, 0, 50, 50);
} else {
// Browser doesn't support CANVAS
}
});
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
$(document).ready(function() {
var ctx = $("#canvas")[0].getContext("2d");
// Choose a color
ctx.fillStyle = "#00ff00";
ctx.strokeStyle = "#ff0000";
ctx.fillRect(10, 10, 200, 200);
});
OK, I duplicate the problem in IE and solve it. The reason is the script tag must use the explicit close tag. So change
<script type="text/javascript" src="/js/jquery-1.4.2.min.js" />
to:
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
(browser does not understand <script ... />)
there is another syntax issue is the canvas element does not have close tag, but browser (IE) seems to understand it. Not sure FF
加载中,请稍侯......
精彩评论