[ Tag ] canvas – CEH – Saher Team.
Represents a resolution-dependent bitmap canvas, which can be used for rendering graphs,
game graphics, or other visual images on the fly. Authors should not use the canvas element
in a document when a more suitable element is available. For example, it is inappropriate to
use a canvas element to render a page heading. If the desired presentation of the heading is
graphically intense, it should be marked up using appropriate elements (typically h1) and then
styled using CSS and supporting technologies such as XBL.
When authors use the canvas element, they must also provide content that, when presented to the user,
conveys essentially the same function or purpose as the bitmap canvas. This content should be nested
within the canvas element as a fallback.
The HTML <canvas> tag is used for creating graphics on the fly. It can be used for rendering graphs,
game graphics, or other visual images.To draw on the canvas, the <canvas> tag is used in conjunction
with the getContext(contextId) method.Any content between the <canvas></canvas> tags is “fallback content”-
meaning, it will be displayed only if the canvas cannot be displayed.
The <canvas> tag was introduced in HTML 5.
The <canvas> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> tag.
Definition and Usage
canvas> has a wealth of features, like:
drawing shapes,
filling colours,
creating gradients and patterns,
rendering text,
copying images, video frames, and other canvases,
manipulating pixels, and
exporting the contents of a <canvas> to a static file.
In fact, the canvas API is so interesting, I wouldn’t be surprised to see entire books dedicated to it (and no, I don’t plan to write that book!).
It’s important when working with <canvas> to treat it like a real painting canvas. Say you lay down a strip of red paint on a real canvas.
If you paint over it in blue, you can’t get back to your original red paint. It’s the same with the canvas element. There’s no concept of
layers. The <canvas> element is a bitmap drawing API, and once you’ve committed to a set of pixels, you’re stuck with them.
Before we dive in to the canvas API, I want to remind you to make sure you’re using
the right technology for the job.
SVG is the alternative drawing API. It’s vector-based and does support layers.
SVG also exists in the DOM, making it easy to attach event handlers for interactivity,
and it’s easier to deal with collision detection (in games, for example). It also supports
animation either through SMIL or JavaScript. There’s an excellent JavaScript library called
Raphaël that uses SVG to render images and animations.
The <canvas> element is good for pixel manipulation and highly active animations.
Brad Neuberg does a really good job of explaining the differences in his Google IO
talk from back in 2009.
With all that in mind, let’s crack on with the canvas API.
Four of the Big Five browsers support canvas. We’re naturally missing IE8, but there’s hope: IE9 does support canvas. In fact, it supports hardware accelerated drawing to the canvas — other browsers currently don’t, making IE9 preview 3 the fastest (canvas) kid on the block!
Tips and Notes
Note:
Any text inside the <canvas> element will be displayed in browsers that does not support <canvas>.
Tip:
For a complete reference of all the attributes and methods that can be used with the canvas object,
go to our complete canvas 2d reference.
Attribute:
height
pixels Specifies the height of the canvas
width
pixels Specifies the width of the canvas
|
<!DOCTYPE html>
<html lang="en">
<head>
<script type="application/x-javascript">
function displayCanvas()
{
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (0, 0, 150, 75);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (40, 30, 125, 75);
ctx.fillStyle = "rgb(0,0,154)";
ctx.strokeRect (20, 20, 50, 100);
}
}
</script>
</head>
<body onload="displayCanvas();">
<canvas id="myCanvas" width="300" height="200">
Your browser does not support the canvas tag. At the time of writing,
Firefox, Opera, and Chrome support this tag.</p>
<p>Here's an <a href="/pix/html_5/tags/html_canvas_tag.gif">
image of what it's supposed to look like</a>.
</canvas>
</body>
</html>
|
WordPress 