The canvas element has no drawing abilities of its
own. All drawing must be done inside a JavaScript:
Example Program:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
</body>
</html>
JavaScript
uses the id to find the canvas element:
|
var
c=document.getElementById("myCanvas");
|
Then,
create a context object:
|
var
cxt=c.getContext("2d");
|
The
getContext("2d") object is a built-in HTML5 object, with many methods
to draw paths, boxes, circles, characters, images and more.
The
next two lines draws a red rectangle:
|
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); |
The
fillStyle method makes it red, and the fillRect method specifies the shape,
position, and size.
0 comments:
Post a Comment