Архив метки: javascript

yui-compressor — программа для сжатия JavaScript и CSS

yui-compressor — программа для сжатия JavaScript и CSS

Страница проекта здесь http://yui.github.io/yuicompressor/

Программа консольная, написана на Java

Используется примерно так:

java -jar yuicompressor-x.y.z.jar [options] somescript.js > compressed.js

Javascript: Простейшая программа на three.js

Пример взят из документации с threejs.org, статья со всеми комментариями «Введение — Создание сцены». Вместо заливки цветом вставлена загрузка текстуры из файла-картинки.Код работающего примера:

<html> 
<head> 
<title>My first Three.js app</title> 
<style>
canvas { 
width: 100%; 
height: 100% 
}</style> 
</head> 
<body> 
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
 <script> 
 // Our Javascript will go here. 
 var scene = new THREE.Scene(); 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
 var renderer = new THREE.WebGLRenderer(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 document.body.appendChild( renderer.domElement );
 
 var geometry = new THREE.CubeGeometry(3,3,3); 
 //var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); 
 var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('tex.jpg') } ); 
 var cube = new THREE.Mesh( geometry, material ); 
 scene.add( cube ); 
 camera.position.z = 5;
 
function render() { 
    requestAnimationFrame(render); 
    
    cube.rotation.x += 0.1; 
    cube.rotation.y += 0.1;
    
    renderer.render(scene, camera); 
} 

render();
 </script> 
 </body> 
 </html>

В результате рисуется вращающийся кубик. Чтоб было что-то видно, надо либо рядом с файлом примера положить картинку tex.jpg, либо раскоментировать строку var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );, а следующую закоментировать.

Canvas: getContext is not a function

Проблема «getContext is not a function» наблюдается, если canvas создаётся динамически, или просто сразу не имеет id, когда хотим получить от него getContext (2d).

Рабочее решение при использовании jQuery:

var context = $(".SomeClass").get(0).getContext("2d");

Здесь SomeClass — класс, присвоенный canvas без id, всё отработает без ошибок

Обзор каруселей на javascript

Обзор каруселей на javascript со ссылками на примеры — Image Gallery With CSS & jQuery | jQuery/CSS/Script | WebDesign | blognews | AlexWolkov | Life & Live.

Моя любимая — http://www.professorcloud.com/mainsite/carousel.htm

Подборка статей по программированию html5 Canvas

Первой попалась вот эта www.html5rocks.com/en/tutorials/canvas/integrating/. Статья с примерами кода и ссылками на открытые движки html5, в которых используются описанные технологии. Список рассмотренных вопросов:

  • как программно проверить, что canvas поддерживается браузером
  • пример создания элемента canvas
  • пример преобразования содержимого canvas в URI (img.src=»data:image/gif;base64,R0lGOD…)
  • пример сохранения data URI в локальное хранилище (local storage)
  • пример сохранения data URI на сервере через скрипт на PHP
  • примеры рисования из кода Javascript линий и картинок на canvas

Следующая статья — http://www.html5canvas.ru/2011/03/mouse.html. Здесь приведён код javascript для обработки событий мыши на canvas — внутри, снаружи, нажатие кнопок, изменение координат курсора мыши. Приведён скелет html страницы для работы с canvas.

На http://www.robodesign.ro/paintweb/trunk/demos/demo1.html пример готового приложения — графический редактор PaintWeb, написанный на javascript. Из инструментов используются карандаш, стёрка, кружки, прямоугольники, вставка текста и картинок (по URL)

http://www.mrdoob.com/projects/harmony/#grid — ещё один движок для рисования на html5 — Harmony.

И напоследок http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#transformations — документация по API html5 canvas — масштабирование, перемещение и поворот содержимого canvas на произвольный угол; рисование и стиль линий, окружностей, прямоугольников, кривых Безье; текст; заливки, линейные и радиальные градиенты; вставка изображений; манипуляции на уровне пикселей; прозрачность изображений, смазывание, тень. Всё нафаршировано примерами кода.

В итоге информации достаточно, чтоб сделать графический редактор на html5 под собственные нужды.