Инфа не самая свежая, но думаю что тем кто только начал осваивать яваскрипт(как и я) это пригодиться. Вспомнил я было, как видел онлайн рисовался на JS. И решил разузнать, сложно ли это. В итоге была найден элемент canvas от WHATWG. Вещь поразительная. Позволяет рисовать на экране различные малюнки.
Делается примерно так:Code <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>
Все казалось бы хорошо, НО, поддерживается данное чудо только в Opera 9, Firefox 1.5 и Safari 2. А IE и 6-ой, и 7-ой как обычно впереди планеты всей.
Ситуацию выручают уже написанные слои эмуляции этого элемента для IE через VML. Вообще все это рисование требует определенных творческих навыков, знания цветов и их взаимодействия, алгоритмов смешений, ибо рисовать на канве с готового эскиза по алгоритму удобнее. уроки фотошопа быстро научат вас определенным навыкам и вы сможете делать потрясающие композации как на холсте фотошопа, так и на canvas.
ExplorerCanvas - реализация слоя от Гугля. Поддерживает практически весь функционал, автоматически расширяет все теги <canvas> документа своими методами. То есть достаточно подключить библиотеку и больше ни о чем особо не беспокоиться.
MooCanvas - тот же ExplorerCanvas, но в варианте для любителей MooTools. В отличие от предыдущего, не встраивается автоматически в документ, а требует создания элемента через DOM:Code window.onload = function() {
var c = new Canvas({
id: 'canvas',
width: 500,
height: 500});
c.inject(document.body);
}
Очень жаль что canvas не поддерживается многими брузерами что ИМХО не позволяет использовать его только в широких целях а только для саморазвития или конкретной задачи.
|
