如何在HTML5画布中动画树 [英] How to animate tree in HTML5 canvas
本文介绍了如何在HTML5画布中动画树的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在画布上绘制这个树，现在我想动画它，使它看起来像它在增长。我是一个初学者动画，所以我会很高兴任何投入和想法！此外，树应该是每次增长不同，看起来不一样，如果这是可能的。
谢谢！
<！DOCTYPE html&
< html lang =en>
< head>
< title> tree< / title>
< / head>
< body onload =init（）;>
< canvas id =canvaswidth =1200height =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 '）;
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>
解决方案
线定义和您的绘图分成两个单独的步骤。
-
定义构成树的所有行。 p>
-
使用动画循环以主分支开头，以最小的树枝结尾。
Define all the lines that make up your tree.
Use an animation loop to draw those lines starting with the main branch and ending with the smallest twigs.
这是注释代码和演示：
var canvas = document.getElementById ; var var = canvas; var var = canvas; height; var var = canvas; var var = canvas; 400; // grow definitionsvar angle = 0.1 * Math.PI; var depth = 6; //保存段以供将来使用animationvar branches = []; for（var i = 0; i <= depth; i ++）{branches.push []）;} var segments = []; var segmentIndex = 0; // animation variablesvar nextTime = 0; var delay = 16 * 5; // // // ///////////// do stuff！ treedefineTree（x1，y1，x2，y2，angle，depth）; //创建要使用animationfor（var i = branches.length-1; i> = 0; i - ）{segments = segments.concat（branches [i]）;} //加载叶子图像，然后启动animatingvar叶子= new Image（）; leaves.onload = function（）{//动画绘制树requestAnimationFrame（animate） src ='https：//dl.dropboxusercontent.com/u/139992952/multple/leaves.png'; ///////////// functions //用于重复定义树形结构的所有段defineTree （x1，y1，x2，y2，angle，depth）{var segment = {x1：x1，y1：y1，x2：x2，y2：y2，linewidth：depth，分支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）; }} //绘制树形函数的1段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（）;如果（segmentIndex< segments.length）{requestAnimationFrame（animate）; //请求另一个循环，直到所有段都被绘制为止。 } // delay until nextTime if（currentTime< nextTime）{return;} //设置新的nextTime nextTime = currentTime + delay; //绘制当前段drawSegment（segments [segmentIndex]）; // increment the segmentIndex for next loop segmentIndex ++;}
{background-color：ivory; padding：10px; } #canvas {border：1px solid red;}
; canvas id =canvaswidth = 400 height = 500>< / canvas>
I drew this tree in canvas and now i want to animate it and make it look like it is growing. I am a beginner with animations so i would be happy for any input and ideas! Also the tree is supposed to grow differently every time and not look the same if that is possible. Thanks!
<!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>
解决方案
You can animate your growing tree by separating your tree-line definitions and your drawings into 2 separate steps. That way you can animate the drawing of your tree-lines.
Here's annotated code and a Demo:
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>
这篇关于如何在HTML5画布中动画树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
