HTML5 캔버스에서 트리를 움직이는 방법

이 트리를 캔버스에 그렸으며 이제 애니메이션을 애니메이트하고 크기가 커지는 것처럼 보이게하려고합니다. 나는 모든 입력과 아이디어에 만족할 것입니다 그래서 애니메이션 초급입니다! 또한 나무는 매번 다르게 자라기도하고 가능하다면 똑같이 보이지도 않습니다. 감사합니다.HTML5 캔버스에서 트리를 움직이는 방법

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>tree</title> 
    </head> 

    <body onload="init();"> 

     <canvas id="canvas" width="1200" height="600" ></canvas> 

     <script type="text/javascript" > 

      init = function() { 

       var x1 = 400; 
       var y1 = 300; 

       var x2 = 400; 
       var y2 = 200; 

       var angle = 0.1 * Math.PI; 
       var depth = 6; 

       drawTree(x1, y1, x2, y2, angle, depth); 
      } 

      drawTree = function(x1, y1, x2, y2, angle, depth){ 
       var context = document.getElementById('canvas').getContext('2d'); 

       context.strokeStyle = 'rgb(0, 0, 0)'; 
       context.lineWidth = depth; 
       context.beginPath(); 
       context.moveTo(x1, y1); 
       context.lineTo(x2, y2); 
       context.stroke(); 

       if(depth > 0){ 
        var x = x2 - x1; 
        var y = y2 - y1; 

        var scale = 0.5 + Math.random() * 0.5; 

        x *= scale; 
        y *= scale; 

        var xLeft = x * Math.cos(-angle) - y * Math.sin(-angle); 
        var yLeft = x * Math.sin(-angle) + y * Math.cos(-angle); 

        var xRight = x * Math.cos(+angle) - y * Math.sin(+angle); 
        var yRight = x * Math.sin(+angle) + y * Math.cos(+angle); 

        xLeft += x2; 
        yLeft += y2; 

        xRight += x2; 
        yRight += y2; 

        drawTree(x2, y2, xLeft, yLeft, angle, depth - 1); 
        drawTree(x2, y2, xRight, yRight, angle, depth - 1); 
       } 
      } 

     </script> 
    </body> 
</html>

출처

2014-12-03 Marlen Julie

http://d3js.org/ – mccainz

슈퍼 순진 방법 당신의 무승부를 호출 던져하는 것 [' setTimeout()'] (http://jsfiddle.net/brbcoding/tkuwc5zg/) (그러나 이것은 느린 속도에서 끔찍한 것처럼 보입니다). 각 '지점'의 시작점과 끝점을 잡고 해당 시작점과 끝점 ('requestAnimationFrame' 등을 사용하여 일부 그리기 루프 내부)의 중간 지점에서 캔버스를 다시 그리기를 원할 것입니다. – brbcoding

다음은 무슨 뜻입니까? - http://jsfiddle.net/brbcoding/2ym5710m/ – brbcoding

모든 과학이 뒤에 있으며, 아무도 간단하고 깨끗한 솔루션을 제공하지 않을 것입니다. 물론, 나는 틀린 나를 증명할 사람을 감히, 나 자신을보고 싶다. :)

하지만 인터넷에서 자라나는 L-Systems 및 프랙탈 트리에 대해 읽으려고합니다. 여기에 좋은 예, 당신은 소스 코드에보고 거기에 "grow.js"스크립트를 검사 할 수 있습니다 :

https://developer.cdn.mozilla.net/media/uploads/demos/c/o/codepo8/1a61b64545e9e7b1113eef901831ec61/fractal-trees_1313841385_demo_package/index.html

출처

2014-12-03 17:45:43 ElDoRado1239

당신은 2로 나무 줄 정의와 도면을 분리하여 성장하는 나무 애니메이션을 적용 할 수 있습니다

별도의 단계. 이렇게하면 트리 선 그림을 애니메이션으로 만들 수 있습니다.

트리를 구성하는 모든 라인을 정의하십시오.
메인 브랜치부터 시작하여 가장 작은 나뭇 가지로 끝나는 라인을 그리려면 애니메이션 루프를 사용하십시오. 여기

코드와 데모를 주석 것 :

var canvas=document.getElementById("canvas"); 
 
var context=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 

 
// tree definitions 
 
var x1 = 200; 
 
var y1 = 500; 
 
var x2 = 200; 
 
var y2 = 400; 
 

 
// growing definitions 
 
var angle = 0.1 * Math.PI; 
 
var depth = 6; 
 

 
// save segments for later animation 
 
var branches=[]; 
 
for(var i=0;i<=depth;i++){branches.push([]);} 
 
var segments=[]; 
 
var segmentIndex=0; 
 

 
// animation variables 
 
var nextTime=0; 
 
var delay=16*5; 
 

 
///////////// Do stuff! 
 

 
// define the tree 
 
defineTree(x1, y1, x2, y2, angle, depth); 
 

 
// create a combined array of segments to be drawn with animation 
 
for(var i=branches.length-1;i>=0;i--){ 
 
    segments=segments.concat(branches[i]); 
 
} 
 

 
// load leaf images and then start animating 
 
var leaves=new Image(); 
 
leaves.onload=function(){ 
 
    // animate drawing the tree 
 
    requestAnimationFrame(animate); 
 
} 
 
leaves.src='https://dl.dropboxusercontent.com/u/139992952/multple/leaves.png'; 
 

 

 

 
///////////// functions 
 

 
// function to reiteratively define all segments of a tree 
 
function defineTree(x1, y1, x2, y2, angle, depth){ 
 

 
    var segment={ 
 
    x1:x1,y1:y1, 
 
    x2:x2,y2:y2, 
 
    linewidth:depth, 
 
    }; 
 
    branches[depth].push(segment); 
 

 
    if(depth > 0){ 
 
    var x = x2 - x1; 
 
    var y = y2 - y1; 
 

 
    var scale = 0.5 + Math.random() * 0.5; 
 

 
    x *= scale; 
 
    y *= scale; 
 

 
    var xLeft = x * Math.cos(-angle) - y * Math.sin(-angle); 
 
    var yLeft = x * Math.sin(-angle) + y * Math.cos(-angle); 
 

 
    var xRight = x * Math.cos(+angle) - y * Math.sin(+angle); 
 
    var yRight = x * Math.sin(+angle) + y * Math.cos(+angle); 
 

 
    xLeft += x2; 
 
    yLeft += y2; 
 

 
    xRight += x2; 
 
    yRight += y2; 
 

 
    defineTree(x2, y2, xLeft, yLeft, angle, depth - 1); 
 
    defineTree(x2, y2, xRight, yRight, angle, depth - 1); 
 
    } 
 
} 
 

 
// draw 1 segment of the tree 
 
function drawSegment(segment){ 
 
    context.strokeStyle = 'rgb(0, 0, 0)'; 
 
    context.lineWidth = segment.linewidth; 
 
    context.beginPath(); 
 
    context.moveTo(segment.x1, segment.y1); 
 
    context.lineTo(segment.x2, segment.y2); 
 
    context.stroke(); 
 
    // 
 
    if(segment.linewidth==0){ 
 
    var dx=segment.x2-segment.x1; 
 
    var dy=segment.y2-segment.y1; 
 
    var angle=Math.atan2(dy,dx)+Math.PI/2; 
 
    var i=parseInt(Math.random()*2.99); 
 
    var j=parseInt(Math.random()*1.99); 
 
    context.save(); 
 
    context.translate(segment.x2,segment.y2); 
 
    context.rotate(angle); 
 
    context.scale(.25,.25); 
 
    context.drawImage(leaves,127*i,142*j,127,142,-127/2,-142/2,127,142); 
 
    context.restore(); 
 
    } 
 
} 
 

 

 
// animate drawing each segment of the tree 
 
function animate(currentTime){ 
 

 
    // request another loop until all segments have been drawn 
 
    if(segmentIndex<segments.length){ 
 
    requestAnimationFrame(animate); 
 
    } 
 

 
    // delay until nextTime 
 
    if(currentTime<nextTime){return;} 
 

 
    // set the new nextTime 
 
    nextTime=currentTime+delay; 
 

 
    // draw the current segment 
 
    drawSegment(segments[segmentIndex]); 
 

 
    // increment the segmentIndex for next loop 
 
    segmentIndex++; 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=400 height=500></canvas>

출처

2014-12-03 18:35:03 markE

HTML5 캔버스에서 트리를 움직이는 방법

답변

관련 문제