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>
|
| Часовой пояс GMT +3, время: 15:03. |