Помощник
|
Canvas в движении |
Bucks
|
Сообщение
#1
|
||
|
|
||
|
|||
Letmetouchyou |
5.9.2010, 17:01;
Ответить: Letmetouchyou
Сообщение
#2
|
|
Bucks, на такой вопрос ответ один: циклом.
|
|
|
Bucks
|
Сообщение
#3
|
|
Но вы же не думали что мне это что-то даст? Просто я даже не могу представить как сделать, чтобы линия двигалась, т.к. она изначально задается нарисованная(надеюсь правильно сказал=))
|
|
|
MximuS |
5.9.2010, 20:05;
Ответить: MximuS
Сообщение
#4
|
|
она сначала рисуется, потом стирается и рисуется в новый координатах, потом опять стирается и рисуется в новых координатах....
|
|
|
Letmetouchyou |
5.9.2010, 22:10;
Ответить: Letmetouchyou
Сообщение
#5
|
|
|
<style> canvas {border:1px solid #393939} </style> <canvas id='line'> </canvas> <script> var SCREEN_WIDTH=window.innerWidth,SCREEN_HEIGHT=window.innerHeight; var element = document.getElementById('line'); var canvas= element.getContext('2d'); var way = [true,false]; element.width = SCREEN_WIDTH; element.height = SCREEN_HEIGHT; canvas.lineWidth=5; canvas.beginPath(); canvas.strokeStyle = "rgb(0,0,0)"; canvas.moveTo(0, 0); var length = 100; var counter = length/2, count = 0;; var points = [], temp=[]; var x=0, y=0; var background ="rgb(255, 255, 255)"; for(var i = 0; i < length; i++){ x++; y++; points.push([x,y]); canvas.lineTo(x,y); } canvas.stroke(); var randX = true, randY = true; var lastX = 0, lastY = 0; var again; function rand(){ var oldRX = randX; var oldRY = randY; if(count == counter){ randX = way[Math.floor(Math.random()*2)]; randY = way[Math.floor(Math.random()*2)]; count = 0; } else count ++; lastX = (randX)?points[points.length-1][0]+1:points[points.length-1][0]-1; lastY = (randY)?points[points.length-1][1]+1:points[points.length-1][1]-1; if(lastX > SCREEN_WIDTH || lastX <0 || lastY <0 || lastY >SCREEN_HEIGHT ){ again = true; } else again = false; } function step(){ canvas.beginPath(); var temp = []; canvas.globalCompositeOperation="source-over"; canvas.fillStyle="rgb(255, 255, 255)"; canvas.fillRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT); canvas.moveTo(points[1][0], points[1][1]); for(var i = 1; i < points.length; i++){ var x = points[i][0]; var y = points[i][1]; temp.push([x,y]); canvas.lineTo(x,y); } rand(); while(again){ rand(); } canvas.lineTo(lastX,lastY); temp.push([lastX,lastY]); points = temp; canvas.stroke(); var status = false; if(!status){ setTimeout(step,10); } } step(); </script> что то вроде такого. предупреждаю - в пример не брать, код очень грязный
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Добавить к коду кнопки функцию Canvas | 0 | Anshag | 5065 | 25.11.2015, 12:41 автор: -Anshag- |
Текстовая версия | Сейчас: 23.4.2024, 19:39 |