Html5 and html5 tutorials

Html5 and html5 tutorials

The simple part of canvas is not mentioned first.

Let's talk about some of the problems I encountered today. Although simple, I want to summarize them and it will seem convenient.

First attach a chartjs (canvas to draw the icon, convenient) Official Website: http://www.chartjs.org

Usage: <script src = "Chart. js"> </script>

Var chart = new Chart (context );

The next step is to create different tables as needed, and the methods for defining data in different tables are different.

There will be a demo in the picture.

Finally: chart. Table Name (the name of the array where your data is stored );

 

The following are the problems encountered during circle painting:

DrawImage () used for canvas image painting may cause loading errors or drawing errors (mainly chrome and firefox problems)

Solution: Add a loading function to your img object

Img. onload = function (){

Context. drawImage ();

}

Canvas method:

Context. translate (x, y) Note that it is relative to the last displacement

Context. scale () to zoom in or out on the original canvas

Context. rotate (Math. PI/n); rotate relative to the original canvas

 

That's all ........ I hope I can help some of my friends who are learning together.