var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
JavaScript: Вставка значений переменных в строку
Добавить комментарий
Архив метки: javascript
Дамп содержимого объекта в JavaScript
console.log("my object: %o", myObj)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
Исходники paintweb
paintweb.js — paintweb — Online painting application — Google Project Hosting.
PaintWeb — движок для рисования прямо в браузере, написан на javascript.
Подборка статей по программированию 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 под собственные нужды.