- HTML5 Canvas Cookbook
- Eric Rowell
- 215字
- 2021-08-27 12:08:02
What is HTML5 Canvas
Canvas was originally created by Apple in 2004 to implement Dashboard widgets and to power graphics in the Safari browser, and was later adopted by Firefox, Opera, and Google Chrome. Today, canvas is a part of the new HTML5 specification for next generation web technologies.
The HTML5 canvas is an HTML tag that you can embed inside an HTML document for the purpose of drawing graphics with JavaScript. Since the HTML5 canvas is a bitmap, every pixel drawn onto the canvas overrides pixels beneath it.
Here is the base template for all of the 2D HTML5 Canvas recipes for this book:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200">
</canvas>
</body>
</html>
Notice that the canvas element is embedded inside the body of the HTML document, and is defined with an id, a width, and a height. JavaScript uses the id to reference the canvas tag, and the width and height are used to define the size of the drawing area. Once the canvas tag has been accessed with document.getElementById(), we can then define a 2D context with:
var context = canvas.getContext("2d");
Although most of this book covers the 2D context, the final chapter, Chapter 9, uses a 3D context to render 3D graphics with WebGL.