How to use HTML5 canvas_html5 tutorial skills

The

canvas element uses JavaScript to draw images on the web page and has no drawing capabilities.

Canvas is a rectangular area that can be controlled every pixel.

canvas has many ways to draw paths, rectangles, circles, characters, and add images.

Here are some examples:

1. Fill the canvas

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid red;">

Execute as follows:

2. Get coordinates

JavaScript CodeCopy content to clipboard

XML/HTML CodeCopy content to clipboard

1. <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">div>
2. <div id="xycoordinates" >div>

Execute as follows:

3. Draw lines and graphics

1) Draw a square as follows:

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. Your browser does not support the canvas tag.

Execute as follows

2) Draw a circle as follows:

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. Your browser does not support canvas

Execute as follows:

4. Draw gradient

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. Your browser does not support the canvas tag.

Execute as follows:

5. Pictures

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
2. Your browser does not support the canvas tag.

The execution is as follows:

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Original text: http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html