HTML5 Canvas (帆布)

What is Canvas?

• The HTML5 canvas element uses JavaScript to draw graphics on a web page.
• A canvas is a rectangular area, and you control every pixel of it.
• The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

Sample:

<script type="text/javascript">

var c=document.getElementById("myCanvas");      //JavaScript uses the id to find the canvas element:

var ctx=c.getContext("2d");               //Then, create a context object

ctx.fillStyle="#FF0000";                    //The next two lines draws a red rectangle

ctx.fillRect(0,0,150,75);

</script>

 

 

The getContext("2d") object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

Reference