Javascript implements 2D and 3D with the Canvas Element

I haven't written a blog for almost half a year.

 

Some people may have known that the canvas element is determined by the W3C html5.0 solution. Unfortunately, ie does not support this element,
Firefox supports this element in earlier versions. Below are some browsers that support Canvas Element preview.

 

Firefox	Safari	Opera	Assumercanvas
2.0 ○	2.0 ○	9.2 ○	0002 △
3.0 ○	3.0 ○	9.5 ○

 

Javasercanvas is an extension class launched by Google to allow IE to support Canvas elements, namely excanvas. js. The latest version is version 0002.
Why is it a triangle, because only some attribute methods are supported.
Bytes ---------------------------------------------------------------------------------------------------------

Undeniable inherent disadvantages of javascript:

Poor JavaScript because of Microsoft's resolute opposition to JS extension, and IE occupies 70% of the browser market, making js html extension difficult, because Microsoft promotes Silverlight, and
Adobe gave up the promotion of SVG flash, so Javascript is a pity and nobody cares.

However, JavaScript is a magic language, which is not officially provided. It is a self-developed and non-existent method. functions can be used to build new objects through prototype, so such extensions as JQ
Controls are everywhere, JavaScript does not have an image library, drawing class, But Canvas elements can be used in other browsers, and VML can be used in IE to construct a canvas.

However, it gives me the feeling that DIV implements graphics and Canvas elements, which is too superficial and does not support many elements, such as the most important text, Font, and rotation, deformation.
It is incomparable to the existing flash and the endless stream of Silverlight.

Here I have a piece of advice, that is, drawing with JavaScript = self-pinching, or honestly using Silverlight or flash.
Bytes --------------------------------------------------------------------------------------------------------

Undeniable inherent advantages of javascript:

CodeA small amount of plug-ins do not need to be installed on the client. This is not suitable for enterprise-level Intranet users. There are many excellent JS libraries that can enrich JS scripts.
Thanks to Google, its excanvas. js extension class is not perfect and has few functions, but at least let
Javascript supports drawing in multiple browsers.

I would like to recommend a website here, because almost no JavaScript plot is used in China, so there is very little relevant information.
But in Japan, HTML5 is called the Second-era HTML language.
Http://www.html5.jp/small Japanese site, provides very detailed HTML5 reference materials, including Canvas elements, and methods, attributes
The browser supports and does not support the browser.

 

The canvas element is still very useful. If you want to develop quickly and generate reports and pie charts for customers, you do not need to use Silverlight or flash.
We recommend several widgets in Japan (all based on excanvas. JS)

 

 

 

 

 

 

 

These controls are super simple to use

Column chart settings

Code
VaR items = [
[ " Item " , 20 , 58 , 40 , 14 , 38 , 20 , 40 ],
[ " Item B " , 10 , 14 , 58 , 80 , 70 , 90 , 20 ],
[ " Item C " , 10 , 14 , 58 , 80 , 70 , 90 , 20 ],
[ " Item D " , 10 , 14 , 58 , 80 , 70 , 90 , 20 ],
[ " Item E " , 10 , 14 , 58 , 80 , 70 , 90 , 20 ]
];

The seven numeric groups represent seven days of a week. If you have multiple products, you can define more products F, product g, and automatic distribution of controls.
I have tested the support of all browsers. If you are an enterprise user and do not want to use flash, you can use this tool to facilitate modification and maintenance.

Pie Chart settings

Code
VaR items = [
[ " Sample01 " , 150 ],
[ " Sample02 " , 100 ],
[ " Sample03 " , 80 ],
[ " Sample04 " , 60 ],
[ " Sample05 " , 30 ],
[ " Sample06 " , 20 ],
[ " Sample07 " , 10 ],
[ " Sample08 " , 10 ],
[ " Sample09 " , 10 ],
[ " Sample10 " , 10 ],
[ " Sample11 " , 10 ],
[ " Sample12 " , 10 ]
];

 

To simplify the process, add a record ["sample13", 10] to the comparison, and the control automatically calculates the percentage.

Download JS controls

Bytes -------------------------------------------------------------------------------------------------

Hardcore application Canvas elements

The world is big, and there are no surprises. There are people outside of the world, and there are days outside of the world.

Danish, JavaScript enthusiast, + genius.
Jacob seidelin

This is his 2D work (it is best to use Firefox, Google browser, ie will be very slow)
Http://www.nihilogic.dk/labs/mario/mario_large_music.htm
Super Mary with only 14 K code (author open source)
He implemented it with the Canvas Element and didn't use any images, 14 k oh, and I couldn't even implement it if I gave me 1400 K.
 
Recently, he is studying 3D.

 

The following is a 3D game that he uses JS + canvas (it is best to use Firefox, Google browser, ie will be very slow)

Http://www.nihilogic.dk/labs/wolf/ 3D Shooting x Open Door C bullet
Http://www.nihilogic.dk/labs/chess/ 3D chess (with mouse rotation)

---------------------------------------------------------------------------

Conclusion: To understand the Canvas Element, you can also learn to apply excanvas. js.
Can refer to the http://www.html5.jp/, not difficult, if you do not need flash, Silverlight, just reports
The application is still a good choice. Of course, if you are a JS game enthusiast, You can further explore it. Of course
We recommend that you use flash and Silverlight if you are not an avid type like Jacob seidelin.