We draw graphics through ... javascript
Information is generally well known, but it may be useful for newcomers (like me).
There was a recent need to draw the charts javascript. As a result, the canvas element from WHATWG and its specification were found . Thing is extremely attractive. Allows you to draw here such things:
It is done like this:
The example is taken from the description on Mozilla Developer Center .
Somewhat sad that native support for this element is only in Opera 9, Firefox 1.5 and Safari 2. And IE and the 6th, and 7th as usual ahead of the rest.
The situation is already saved by the already written emulation layers of this element for IE via VML .
There was a recent need to draw the charts javascript. As a result, the canvas element from WHATWG and its specification were found . Thing is extremely attractive. Allows you to draw here such things:
It is done like this:
<html>
<head>
<script type = "application / x-javascript">
function draw () {
var canvas = document.getElementById ("canvas");
var ctx = canvas.getContext ("2d");
ctx.fillStyle = "rgb (200,0,0)";
ctx.fillRect (10, 10, 55, 50);
')
ctx.fillStyle = "rgba (0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
</ script>
</ head>
<body onload = "draw ()">
<canvas id = "canvas" width = "300" height = "300"> </ canvas>
</ body>
</ html>
The example is taken from the description on Mozilla Developer Center .
Somewhat sad that native support for this element is only in Opera 9, Firefox 1.5 and Safari 2. And IE and the 6th, and 7th as usual ahead of the rest.
The situation is already saved by the already written emulation layers of this element for IE via VML .
- ExplorerCanvas - implementation of the Google layer. It supports almost all functionality, automatically expands all document <canvas> tags with its own methods. That is, it is enough to connect the library and nothing more to worry about.
MooCanvas - the same ExplorerCanvas, but in the version for fans of MooTools. Unlike the previous one, it is not automatically embedded in the document, but requires the creation of an element through the DOM:window.onload = function () {
IECanvas is your version of Emil Eklund. It does not support all functions and runs slower than previous ones.
var c = new Canvas ({
id: 'canvas',
width: 500,
height: 500});
c.inject (document.body);
}
So, in principle, the task becomes quite real.
Finally, a few curious benchmarks. I did it myself, so some kind of jambs are possible, but the trend is still there (all in milliseconds):
A range of 300 random vertices
300 triangles
200 circles with a radius of 500 pixels
400 pictures 100x100 without transparency
(IECanvas is not here because it does not support drawImage)
400 pictures 100x100 with transparency
Source: https://habr.com/ru/post/19726/
All Articles