canvas实现一棵随机数

最新推荐文章于 2024-09-11 15:33:18 发布

@小鱼游啊游

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量231

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45377773/article/details/131752546

版权

文章展示了如何利用HTML5的canvas元素结合JavaScript，通过递归算法来绘制随机生成的树形结构。主要涉及的方法包括beginPath(),lineTo(),moveTo(),fill(),arc()等，以及用Math.random()生成随机角度和长度，每次页面刷新都会呈现一棵新的树。

摘要由CSDN通过智能技术生成

canvas实现一棵随机数

首先要搞明白canvas的一些基本方法, 例如: beginPath(), lineTo(), moveTo(), fill(), arc()等

文件夹中新建html和js文件,
在这里插入图片描述
html文件中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="./index.js"></script>
</body>
<style>
    #myCanvas {
        background-color: #78c7bc;
    }
</style>
</html>

js中的代码

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth * devicePixelRatio
canvas.height = window.innerHeight * devicePixelRatio

ctx.translate(canvas.width / 2, canvas.height)
ctx.scale(1, -1) // 缩放更改坐标系, x轴不变, y轴改为向上
drawBranch([0,0], 20, 200, 80)

function drawBranch(v0, thick, length, dir) { // v0起点坐标, thick树干粗细, length分支长度, dir与x轴夹角
    if(thick < 10 && Math.random() < 0.3) {
        return
    }
    if(thick < 2) {
        ctx.beginPath()
        ctx.arc(...v0, 10, 0, 2 * Math.PI)
        ctx.fillStyle = Math.random() < 0.5 ? '#fff' : '#f40'
        ctx.fill()
        return
    }
    ctx.beginPath()
    ctx.moveTo(...v0) // 起点
    const v1 = [ // 三角函数求出终点坐标
        v0[0] + length * Math.cos((dir * Math.PI) / 180),
        v0[1] + length * Math.sin((dir * Math.PI) / 180)
    ]
    ctx.lineTo(...v1) // 终点
    ctx.strokeStyle = '#333' //颜色
    ctx.lineCap = 'round' // 线头样式弧形
    ctx.lineWidth = thick // 线的粗细
    ctx.stroke()
    // 递归绘制树的分支
    drawBranch(v1, thick * 0.8, length * 0.8, dir + Math.random() * 30 ) 
    drawBranch(v1, thick * 0.8, length * 0.7, dir - Math.random() * 30 )  
}