Canvas робота с изображениями
может ли работать канвас с изображениями, ну поворачивать, можете дать пример если да, если нет то как по другому, ну надо только с помощью клиента, и если без всяких плагинов Флеша, Явы и Сильверлайт, короче я понимаю что тут почти всем впадло писать пример, дайте хоть ссылку де есть примеры или что-то похожее??:)
|
ну вы что шутите, как это сделать без ПХП, флеша, явы, сильверлайта???
это мне для часов надо будет 60 картинок, только секундной стрелки?? а в сумме 180???? ну вы гоните, это же по-любому можно сделать! (рисовать стрелки через СВГ, Канвас, не подходит) |
Как так можно… За целый день не смог нагуглить решение?
На первой странице по 3-й ссылке сразу же находим пример: Цитата:
|
rotate(degrees)
А погуглить не судьба?:haha:
<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> |
та ну это капец, гуглил но мне не то выбивало.. короче спс за примеры)
|
Блин не понимаю, как можно задать, чтобы вращалось не вокруг точки 0,0, а например 50,50, или относительно изображение, как сделать чтобы например квадратное изображение вращалось на месте??
я знаю что прошу готовый скрипт, с нуля, но.. может, а?)) |
Внимательнее
Цитата:
В моём примере обратите внимание на translate()...;) Вращение всегда происходит вокруг (0,0). Но с помощью translate(x,y) можно сместить и все координаты, и точку центра вращения...:yes: |
Цитата:
|
Документации внимательно читали
Цитата:
У меня друг, когда учил Logo и сделал сцену с домиком, солнцем и деревом, никак не мог понять, почему при повторном запуске сцена поворачивается и уходит за пределы экрана...:blink: Тем самым, правильный алгоритм будет выглядить так:
|
короче оставаясь в полном не понимании графики, то ли за лени, то ли уже за тупости)) продолжил экспериментировать с вашим кодом и добился нужного мне результата, но вот другая проблема, оно мне рисует изображение, ну я как всегда застрял на тупой проблеме, они поверх рисуются, а мне надо одно, крутящиесе..) от короче
<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> |
Любите графику!
Цитата:
Пробовали затирать фон?;) Например: <html><head><title>Canvas :: Clock</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"; ctx.translate(cnv.width / 3 , cnv.height / 3); ctx.strokeStyle = ctx.fillStyle = "#F0F0F0"; Animate(); } function Animate() { ctx.rect(-cnv.width / 5 , -cnv.height / 7, 2 * cnv.width / 5 , 2 * cnv.height / 7); ctx.fill(); ctx.stroke(); 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> |
я сам это делал, но, мне надо прозрачный, ведь это будут часы, надо ещё 2 стрелки, плюс само табло, так что я хотел бы теперь , вообще ли реально удалять нарисованный имаге?
|
ну блин смотри, я ни как не понимаю как надо правильно работать с с сейв и ресторе, помаги)
<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'; b=0; Animate(); ctx.translate(cnv.width / 4 , cnv.height / 4); } function Animate() { b++; document.getElementById('tst').value = b; ctx.rotate(1/9); ctx.drawImage(image, -cnv.width / 5.1, -cnv.height / 7.5); setTimeout('Animate();',100); } </script></head> <body onload='Init()'> <canvas width="320" height="240" id="clock" style='margin:-20px'></canvas> <input type='text' id='tst'></body> </html> |
Ни знаю как вам, но мая криворукость, и этот просто, ужасный, не знаю как по-другому назвать убогий апи для канваса просто убивает(меня), и это означает что новичку который начинает работать с графикой, просто руки у него отсохнут при просмотре своих результатов, и вообще не дай боже начнёт холивар на тему убогий канвас(для него)), просто раздражает, что ты пытаешься понять с нуля как работать с графикой в интернет среде, а тебе вообще такое выдает, главное не потерять контроль, я уже неделю мучаюсь сделать долбаные часы на канвсе при помощи готовой графики, и тупо ничего, блин, я столько примеров пересмотрел, и кажется наверно выход один...
...JQuery, ни когда на нём не работал, но как я смотрел примеры всяких скриптов переворачивание, то все они на JQuery, ааа, это надо будет опять роздупляться, короче убогое это дело графика(ну для меня конечно))) вывод, для меня клиент-сайд графика это "понты для приезжих", может те кто знает какие-то основе во всякой этой мутной штуке и не так... но их скорее мало, так как редко вижу использование канваса на больших проектах... а может я ещё слепой?!)) |
Так бы и сказал, что часы нужно сделать!
А вот API не скажу, что убогий. Несколько специфичный - да! Но на нём можно что угодно делать! Видал canvas-игры, типо стрелялок 3D или Тетриса? А раз тебе часики нужны, используй прорисовку линиями, а всю область сделай прозрачной. Тогда html-страница будет видна под областью canvas! Я так пламя делал. Могу помочь, если что. Но даром, как-то, руки стынут... :) |
я видел пример с часиками, и с играми, но это как я говорил "понты для приезжих", в больших проектах пока никто не использует(ну или я же слепой))
я же писал, что хочу свои часики, нарисованные в фотошопе, включиние в канвасе) так как знаешь, некоторым легче нарисовать покрасивей всё в фотошопе, чем мучаться ещё рисовать через функции, тем более что у меня элементы с эффектами, а это тоже надо рисовать, тем более я писал "при помощи готовой графики" тобиш что канвас надо только для рисования применять? тогда какая уже у него разница с СВГ(хотя я про тот и про тот мало знаю так что я тут лучше насчёт этого помолчу)) ну короче теперь я понимаю чего он не в офф спецификации, мутно пока ещё с ним)) |
Часовой пояс GMT +3, время: 14:01. |