Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.09.2010, 21:55
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

Canvas робота с изображениями
может ли работать канвас с изображениями, ну поворачивать, можете дать пример если да, если нет то как по другому, ну надо только с помощью клиента, и если без всяких плагинов Флеша, Явы и Сильверлайт, короче я понимаю что тут почти всем впадло писать пример, дайте хоть ссылку де есть примеры или что-то похожее??
Ответить с цитированием
  #2 (permalink)  
Старый 17.09.2010, 01:16
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

ну вы что шутите, как это сделать без ПХП, флеша, явы, сильверлайта???
это мне для часов надо будет 60 картинок, только секундной стрелки?? а в сумме 180???? ну вы гоните, это же по-любому можно сделать!
(рисовать стрелки через СВГ, Канвас, не подходит)
Ответить с цитированием
  #3 (permalink)  
Старый 17.09.2010, 01:37
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Как так можно… За целый день не смог нагуглить решение?
На первой странице по 3-й ссылке сразу же находим пример:
Цитата:
You can draw a rotated image with CANVAS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <title>Test</title>
<style>canvas { border: 1px solid; }</style>
<script>
window.onload = function() {
c = document.getElementById("tutorial").getContext("2d");
i = new Image();
i.src = "http://javascript.ru/forum/images/ca_serenity/misc/logo.gif";
i.onload = function() {
  c.rotate(1.5);
  c.drawImage(i,0,-100, 336, 76);
} 
}
</script>
</head>
<body>
<canvas id="tutorial" width="500" height="500"></canvas>
</body>
</html>


http://developer.mozilla.org/en/docs/Canvas_tutorial
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2010, 01:45
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

rotate(degrees)
А погуглить не судьба?
<html><head><title>Canvas :: Sample #1</title><script>
var
 cnv, ctx, image = new Image();
function Init() {
 cnv = document.getElementsByTagName("canvas")[0];
 ctx = cnv.getContext("2d");
 ctx.fillStyle = "#000";
 ctx.fillRect(0, 0, cnv.width, cnv.height);
 size = cnv.width > cnv.height ? cnv.width : cnv.height;
 ctx.fillStyle = "#0e6";
 x1 = 0;
 ctx.strokeStyle = 'red';
 for(i = 0; i < 320; ++ i) {
  x2 = cnv.width * 0.375 + cnv.height * Math.sin(x1 / cnv.width * 10.7) / 2;
  y2 = cnv.height * 0.45 + cnv.height * Math.cos(x1 / cnv.width * 10.7) / 2;
  ctx.moveTo(x1, cnv.height / 2);
  ctx.lineTo(x2, y2);
  x1 = (x1 + 1) % cnv.width;
 }
 ctx.stroke();
 image.src = cnv.toDataURL("image/png");
 Animate();
 ctx.translate(cnv.width / 2, cnv.height / 2);
}
function Animate() {
 ctx.rotate(1/6);
 ctx.drawImage(image, -cnv.width / 2, -cnv.height / 2);
 setTimeout("Animate()", 50);
}
</script></head>
<body onload='Init()'>
<canvas width="320" height="240">
</canvas>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 17.09.2010, 02:16
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

та ну это капец, гуглил но мне не то выбивало.. короче спс за примеры)
Ответить с цитированием
  #6 (permalink)  
Старый 17.09.2010, 19:15
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

Блин не понимаю, как можно задать, чтобы вращалось не вокруг точки 0,0, а например 50,50, или относительно изображение, как сделать чтобы например квадратное изображение вращалось на месте??
я знаю что прошу готовый скрипт, с нуля, но.. может, а?))
Ответить с цитированием
  #7 (permalink)  
Старый 18.09.2010, 06:00
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Внимательнее
Сообщение от Slawaq Посмотреть сообщение
Блин не понимаю, как можно задать, чтобы вращалось не вокруг точки 0,0, а например 50,50, или относительно изображение, как сделать чтобы например квадратное изображение вращалось на месте??
я знаю что прошу готовый скрипт, с нуля, но.. может, а?))
С OpenGL знакомы? Вот тут почти те же принципы: Работа с матрицей.
В моём примере обратите внимание на translate()... Вращение всегда происходит вокруг (0,0). Но с помощью translate(x,y) можно сместить и все координаты, и точку центра вращения...
Ответить с цитированием
  #8 (permalink)  
Старый 18.09.2010, 19:42
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

Сообщение от Paguo-86PK Посмотреть сообщение
С OpenGL знакомы? Вот тут почти те же принципы: Работа с матрицей.
В моём примере обратите внимание на translate()... Вращение всегда происходит вокруг (0,0). Но с помощью translate(x,y) можно сместить и все координаты, и точку центра вращения...
та ну у вас пример де рисуеться изображение, а когда я ставил свое, так оно у меня просто крутилось вокруг 2 точек, вокруг своей оси и по середине, ну короче буду ваш пример как-то переделать, хотя не знаю как пока, но ещё рас спс)
Ответить с цитированием
  #9 (permalink)  
Старый 19.09.2010, 01:10
Аватар для Paguo-86PK
Профессор
Отправить личное сообщение для Paguo-86PK Посмотреть профиль Найти все сообщения от Paguo-86PK
 
Регистрация: 16.09.2009
Сообщений: 253

Документации внимательно читали
Сообщение от Slawaq Посмотреть сообщение
та ну у вас пример де рисуеться изображение, а когда я ставил свое, так оно у меня просто крутилось вокруг 2 точек, вокруг своей оси и по середине, ну короче буду ваш пример как-то переделать, хотя не знаю как пока, но ещё рас спс)
Известная ошибка всех, кто начинает работать с графикой
У меня друг, когда учил Logo и сделал сцену с домиком, солнцем и деревом, никак не мог понять, почему при повторном запуске сцена поворачивается и уходит за пределы экрана...

Тем самым, правильный алгоритм будет выглядить так:
  1. translate(to_x, to_y);
  2. rotate(angle);
  3. ваш код прорисовки вращаегося объекта(ов)...
  4. rotate(- angle);
  5. translate(- to_x, - to_y);
Но проще оконтовать вращение замечательными context.save() и context.restore()
Ответить с цитированием
  #10 (permalink)  
Старый 19.09.2010, 19:18
Аватар для Slawaq
Профессор
Отправить личное сообщение для Slawaq Посмотреть профиль Найти все сообщения от Slawaq
 
Регистрация: 19.05.2010
Сообщений: 187

короче оставаясь в полном не понимании графики, то ли за лени, то ли уже за тупости)) продолжил экспериментировать с вашим кодом и добился нужного мне результата, но вот другая проблема, оно мне рисует изображение, ну я как всегда застрял на тупой проблеме, они поверх рисуются, а мне надо одно, крутящиесе..) от короче
<html><head><title>Canvas :: Sample #1</title><script>
var
 cnv, ctx, image = new Image();
function Init() {
 cnv = document.getElementById('clock');
 ctx = cnv.getContext("2d");
 image.src = 'http://upload.wikimedia.org/wikipedia/commons/8/8e/%241Sp.png';
 Animate();
 ctx.translate(cnv.width / 3 , cnv.height / 3);
}
function Animate() {
 ctx.rotate(1/6);
 ctx.drawImage(image, -cnv.width / 5 , -cnv.height / 7);
 setTimeout("Animate()", 100);
 
}
</script></head>
<body onload='Init()'>
<canvas width="320" height="240" id="clock"></canvas>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas масштабирование изображения+рисование zeddead Общие вопросы Javascript 2 23.10.2011 17:51
just fun + javascript canvas + ajax hangover Ваши сайты и скрипты 4 20.07.2010 10:37
Онлайн фотошоп на canvas mycoding Общие вопросы Javascript 5 17.04.2010 22:02
Canvas - эффекты к изображениям? Qwe2Qwe Общие вопросы Javascript 1 27.02.2010 20:21
Как эта canvas влияет на https? demi Общие вопросы Javascript 4 28.08.2009 15:15