Shulou(Shulou.com)06/03 Report--

In this issue, Xiaobian will bring you about how to use HTML 5 Canvas to draw trees recursively. The article is rich in content and analyzes and narrates from a professional perspective. After reading this article, I hope you can gain something.

The above picture is a tree randomly generated by html5: ) But you should not think that 40+ lines of code can be done ~ Next, tell you how this tree is implemented.

There must also be html containers. Create a new Index.html with the following code:

canvas tree

Let's start with tree.js:

var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 640; canvas.height = 480; document.body.appendChild(canvas);

The code is easy to understand, create a canvas canvas, then select 2d canvas, set the length and width, *** add this canvas to the body tag.

The most important function of this script is below. The tree is implemented by recursively calling this function. The call draws a line segment at a time:

var drawTree = function (ctx, startX, startY, length, angle, depth, branchWidth){ var rand = Math.random, newLength, newAngle, newDepth, maxBranch = 3, endX, endY, maxAngle = 2 * Math.PI / 4, subBraches; ctx.beginPath(); ctx.moveTo(startX, startY); endX = startX + length * Math.cos(angle); endY = startY + length * Math.sin(angle); ctx.lineCap = 'round'; ctx.lineWidth = branchWidth; ctx.lineTo(endX, endY); if (depth > 0) + ',0)'; } else { ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)'; } ctx.stroke(); newDepth = depth - 1; if (! newDepth) return; subBranches = (rand() * (maxBranch - 1)) + 1; branchWidth *= 0.7; for (var i = 0; i

< subBranches; i++){ newAngle = angle + rand() * maxAngle - maxAngle * 0.5; newLength = length * (0.7 + rand() * 0.3); drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth); } } 接下来一点点解释: 首先，解释下各个变量的含义。ctx就是前面我们的2d画布;startX是线段开始的横坐标，同理startY是纵坐标;length是线段长度;angle是角度;depth是深度，叶子深度为1，树干为12(可自己设定);branchWidth就线段的粗细。有了这些信息，其实就描述了一个线段，通过这些信息我们才能画一个线段。 接下来又很可耻地一大段定义: var rand = Math.random, newLength, newAngle, newDepth, maxBranch = 3, endX, endY, maxAngle = 2 * Math.PI / 4, subBraches; rand其实就是随机一个0~1之间的实数，顾名思义，接下来这些new的就是下一节线段的各种参数。maxBranch就是最多有3个分叉，***的角度 PI/2 即为，下一级调整角度在90%范围内。subBranches就是分叉的个数。 好了，重要可以画了: ctx.beginPath(); ctx.moveTo(startX, startY); endX = startX + length * Math.cos(angle); endY = startY + length * Math.sin(angle); ctx.lineCap = 'round'; ctx.lineWidth = branchWidth; ctx.lineTo(endX, endY); beginPath()表示告诉浏览器"我要开始画了！"，把之前的记录放弃了，这点有点像ps。moveTo()把光标移动到(startX, startY)，再计算终点坐标，endX,endY，有点像高中学的参数方程。然后告诉浏览器，lineCap要round,线段的两头要是圆形的。有多粗呢？等于branchWidth。线段一直画到(endX, endY)。 if (depth >

0) + ',0)'; } else { ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)'; }

If it has been drawn to the *** two levels, that is, leaves, then rgb is (0, 128~192, 0)(rgb stands for color, red green blue, red green blue). If not, take it from (64 - 128, 50, 25). As you may have noticed, rgb must be an integer, but rand() can only be rand real. In fact, everyone also noticed that there is a " >> 0", js means bit operation, the whole moves n bits to the right, 0 is to move 0 bits. It actually works the same as Math.floor(), but faster.

Draw!

ctx.stroke();

Now that the line segment is drawn, it's time to prepare for its bifurcation.

newDepth = depth - 1; if (! newDepth) return;

If this segment is of order ***, there is no bifurcation, and it is also a recursive termination condition.

subBranches = (rand() * (maxBranch - 1)) + 1; branchWidth *= 0.7; for (var i = 0; i < subBranches; i++){ newAngle = angle + rand() * maxAngle - maxAngle * 0.5; newLength = length * (0.7 + rand() * 0.3); drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth); }

The number of branches is a number from 1 to 3. Then draw a few line segments as many as there are branches,newAngle is adjusted within 90 degrees of the original angle, and the new length is between 0.7 and 1.0 of the original length.

*** The tree is ready to be painted.

drawTree(ctx, 320, 470, 60, -Math.PI / 2, 12, 12);

You may notice that the angle is negative, contrary to conventional wisdom. But you know, the ordinate of the canvas is exactly the opposite of the traditional coordinate axis.

There are still many things left to play with. For example, you can adjust various parameters to change the color and size of the tree, or use this method to do other things ~

The above is how to use HTML 5 Canvas recursively to draw trees shared by Xiaobian. If there are similar doubts, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.