个人中心
gpt4 book ai didi

javascript - 如何在 HTML5 canvas 中为树制作动画

转载 作者：行者123 更新时间：2023-11-30 10:09:34 24 4
gpt4 key购买 nike

我在 Canvas 上画了这棵树，现在我想为它制作动画，让它看起来像是在生长。我是动画初学者，所以我很乐意接受任何意见和想法!此外，如果可能的话，这棵树应该每次都以不同的方式生长，并且看起来不一样。谢谢!

<!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>

最佳答案

您可以通过将树线定义和绘图分成两个单独的步骤来为正在生长的树制作动画。这样你就可以为你的树线图画动画。

  1. 定义构成树的所有线。

  2. 使用动画循环绘制从主枝开始到最小的 Twig 结束的线条。

这是带注释的代码和演示:

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>

关于javascript - 如何在 HTML5 canvas 中为树制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27278116/

24 4 0
文章推荐： javascript - 如何在 Javascript 中将变量值放入另一个变量名中
文章推荐： javascript - 如何在 Html5 中从 LocalStorage 获取的文本框中设置值
文章推荐： javascript - jssor slider ，如何设置自动播放时每张幻灯片的持续时间？
文章推荐： javascript - AngularJs 指令在更改时获取单选按钮 ng-model 值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com