• 欢迎访问行云博客,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入行云博客 QQ群
  • 本站广招各类优秀作者,详情可以加群联系
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏行云博客吧

武汉的樱花开了!出不了门别担心,线上带你”开”樱花![Python画樱花]

Python 行云 6个月前 (03-19) 235次浏览 已收录 0个评论 扫描二维码

阳春三月,草长莺飞。今天下午,百年珞珈、纯美樱花,我们线上赏樱花!

效果图:(动态生成樱花)

武汉的樱花开了!出不了门别担心,线上带你”开”樱花![Python画樱花]-行云博客

实现代码(Python):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import turtle as T
import random
import time

# 画樱花的躯干(60,t)
def Tree(branch, t):
    time.sleep(0.0005)
    if branch > 3:
        if 8 <= branch <= 12:
            if random.randint(0, 2) == 0:
                t.color('snow')  # 白
            else:
                t.color('lightcoral')  # 淡珊瑚色
            t.pensize(branch / 3)
        elif branch < 8:
            if random.randint(0, 1) == 0:
                t.color('snow')
            else:
                t.color('lightcoral')  # 淡珊瑚色
            t.pensize(branch / 2)
        else:
            t.color('sienna')  # 赭(zhě)色
            t.pensize(branch / 10)  # 6
        t.forward(branch)
        a = 1.5 * random.random()
        t.right(20 * a)
        b = 1.5 * random.random()
        Tree(branch - 10 * b, t)
        t.left(40 * a)
        Tree(branch - 10 * b, t)
        t.right(20 * a)
        t.up()
        t.backward(branch)
        t.down()

# 掉落的花瓣
def Petal(m, t):
    for i in range(m):
        a = 200 - 400 * random.random()
        b = 10 - 20 * random.random()
        t.up()
        t.forward(b)
        t.left(90)
        t.forward(a)
        t.down()
        t.color('lightcoral')  # 淡珊瑚色
        t.circle(1)
        t.up()
        t.backward(a)
        t.right(90)
        t.backward(b)

# 绘图区域
t = T.Turtle()
# 画布大小
w = T.Screen()
t.hideturtle()  # 隐藏画笔
t.getscreen().tracer(5, 0)
w.screensize(bg='wheat')  # wheat小麦
t.left(90)
t.up()
t.backward(150)
t.down()
t.color('sienna')

# 画樱花的躯干
Tree(60, t)
# 掉落的花瓣
Petal(200, t)
w.exitonclick()

网页樱花树(动态效果):

武汉的樱花开了!出不了门别担心,线上带你”开”樱花![Python画樱花]-行云博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
canvas{
    position: absolute;
    left: 0;
    top: 0;
}
</style>
</head>
<body bgcolor="#000000">
<canvas id="tree"></canvas>
<canvas id="flower"></canvas>
<script>
//两个canvas
var tree = document.getElementById("tree");
tree.width = window.innerWidth;
tree.height = window.innerHeight ;
var tCxt = tree.getContext("2d");
var flower = document.getElementById("flower");
flower.width = window.innerWidth;
flower.height = window.innerHeight ;
var cxt = flower.getContext("2d");

var flowerList = [];//樱花列表
var rootTop = 450 ;//树起点
var flowerColor = "rgba(255,192,203,.3)" ;//花色
var flowerColorDeep = "rgba(241,158,194,.5)" ;//花色深
var treeColor2 = "rgba(255,192,203,.5)" ;//树枝颜色
var treeColor = "#FFF" ;//树干颜色
var fallList = [];//飘落樱花列表
var g = 0.01 ;//重力加速度
var gWind = 0.005;//风力加速度
var limitSpeedY = 1;//速度上限
var limitSpeedX = 1 ;//速度上限

cxt.shadowColor= "#FFF" ;
cxt.shadowBlur = 10 ;

function drawTree(x,y,deg,step,type){
    var deg1 = step%2 == 0 ? 0.1 : -0.1 ;
    var x1 = x + Math.cos(deg+deg1) * (step+4) * 0.8 ;//以步长来判断枝干长度 x轴偏移大一些
    var y1 = y + Math.sin(deg+deg1) * (step-1) * 0.8 ;//以步长来判断枝干长度 Y轴压缩一些
    tCxt.beginPath();
    tCxt.lineWidth = step/3;
    tCxt.moveTo(x,y);
    tCxt.lineTo(x1,y1);
    tCxt.strokeStyle = (step > 5 ) ? treeColor : treeColor2 ;//细纸条都换成花的颜色
    tCxt.stroke();
    if(step > 20){//树干相交的位置有间隙,以一个圆填充
        tCxt.fillStyle = treeColor ;
        tCxt.arc(x,y,step/6,0,Math.PI*2);
        tCxt.fill();
    }
    if(step < 3 || (step < 23 && Math.random() > 0.1)){
        //末梢位置 画花瓣
        var color = [flowerColorDeep,flowerColor,flowerColor][Math.round(Math.random()+0.2)] ;
        var r = 2+Math.random()*2
        tCxt.fillStyle = color ;
        tCxt.arc(x1+Math.random()*3,y1+Math.random()*3,r,0,Math.PI)
        tCxt.fill();
        flowerList.push({x:x,y:y,sx:(Math.random()-0.5),sy:0,color:color,r:r,deg:deg});//保存下画樱花的位置
    }
    step -- ;
    if(step > 0){
        drawTree(x1,y1,deg,step,type);
        if(step%3 == 1 && step > 0 && step < 30)
           drawTree(x1,y1,deg+0.2 + 0.3 * Math.random(),Math.round(step/1.13));//右分叉
        if(step%3 == 0 && step > 0 && step < 30)
           drawTree(x1,y1,deg-0.2 - 0.3 * Math.random(),Math.round(step/1.13));//左分叉
    }
}

drawTree(tree.width/2,rootTop,-Math.PI/2,30,1);//执行

var len = flowerList.length ;
function step(){
    if(Math.random() > 0.3)    fallList.push(flowerList[Math.floor(Math.random()*len)]);//随机取出一个,花瓣复制到飘落花瓣的列表中

    cxt.clearRect(0,0,tree.width,tree.height);
    for(var i = 0 ;i < fallList.length ; i ++){
       if(fallList[i].sy < limitSpeedY) fallList[i].sy += g ;
       fallList[i].sx += gWind ;
       fallList[i].x += fallList[i].sx ;
       fallList[i].y += fallList[i].sy ;
       if(fallList[i].y > rootTop+30){//飘到树根+30的花瓣移除
            fallList.splice(i,1);
            i -- ;
            continue ;
        }
        cxt.beginPath();
        cxt.fillStyle = fallList[i].color ;
        fallList[i].deg += fallList[i].sx*0.05 ;//跟速度相关的旋转花瓣
        cxt.arc(fallList[i].x,fallList[i].y,fallList[i].r,fallList[i].deg,fallList[i].deg+Math.PI*1.3);
        cxt.fill();
    }
    requestAnimationFrame(step);
}
requestAnimationFrame(step);
</script>
</body>
</html>

行云博客 - 免责申明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件与我(admin@xy586.top)联系处理。敬请谅解!

喜欢 (0)
[行云博客]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址