java代码画樱花_樱花的季节,教大家用CANVAS画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果。
废话少说,先看效果。
演示效果地址:http://suohb.com/work/tree4.htm
第一步,我们先画出一棵树的主体。
我画树的使用的原理是,定义一个起始点,从这个点开始,向一个角度移动一段距离。得到另一个点。
画出一条线连接两个点。
以新得到的点,依旧向这个角度,移动一段距离。得到第三个点,连写第二第三个点。
以此类推。一定步长之后,就得到一条射线。
我们根据自然界中的真实树的情况,这条线越来越细,直到最细地方结束。
var treeCanvas = document.getElementById("tree");
treeCanvas.width = window.innerWidth;
treeCanvas.height = window.innerHeight ;
var tCxt = treeCanvas.getContext("2d");
var rootTop = 450 ;//树起始位置
var treeColor = "#FFF" ;//树颜色
function drawTree(x,y,deg,step){
var x1 = x + Math.cos(deg) * step ;//越细的枝干越短,所以以步长来做
var y1 = y + Math.sin(deg) * step ;
tCxt.beginPath();
tCxt.lineWidth = step/3;//树干越来越细
tCxt.moveTo(x,y);
tCxt.lineTo(x1,y1);
tCxt.strokeStyle = treeColor ;
tCxt.stroke();
step -- ;
if(step > 0){
drawTree(x1,y1,deg,step);
}
}
drawTree(treeCanvas.width/2,rootTop,-Math.PI/2,30);
树干出来之后,要做分叉,每个分叉其实就是向另一个方向的树干。
而且分叉要比主干细一些。我们在第二阶段树干位置,每三步向左右分叉。
if(step > 0){
drawTree(x1,y1,deg,step);
if(step%3 == 1)
drawTree(x1,y1,deg+0.5 ,Math.round(step/1.13));//右分叉
if(step%3 == 0)
drawTree(x1,y1,deg-0.5, Math.round(step/1.13));//左分叉
}
这样一棵树的主干基本上就已经完成了。
我们在树的末端几个节点,画一个粉色的半透明的圆。当做樱花。
为了保证所有樱花不是千篇一律的一个角度,我们随机一个起始角度。
function drawTree(x,y,deg,step){
var x1 = x + Math.cos(deg) * step ;//越细的枝干越短,所以以步长来做
var y1 = y + Math.sin(deg) * step ;
tCxt.beginPath();
tCxt.lineWidth = step/3;//树干越来越细
tCxt.moveTo(x,y);
tCxt.lineTo(x1,y1);
tCxt.strokeStyle = treeColor ;
tCxt.stroke();
if(step < 5 ){//在末端五个节点,画一个半圆,作为樱花效果
var r = 2+Math.random()*2
tCxt.fillStyle = flowerColor ;
tCxt.arc(x1+Math.random()*3,y1+Math.random()*3,r,0,Math.PI)
tCxt.fill();
}
step -- ;
if(step > 0){
drawTree(x1,y1,deg,step);
if(step%3 == 1)
drawTree(x1,y1,deg+0.5 ,Math.round(step/1.13));//右分叉
if(step%3 == 0)
drawTree(x1,y1,deg-0.5, Math.round(step/1.13));//左分叉
}
}
这个时候,如果没有特别的要求的,基本算是已经完成了。
之后再要做的就是精益求精,对现在效果做出微调。
1、树干都是直线,在计算下一个点的时候,做一些偏移。
2、樱花树形态比较扁平。给X轴方向上偏移稍微大点,Y轴稍微偏小一点。
3、至少做两种花瓣颜色,一种稍微深一些,一种浅一些。
4、在新建一个canvas层,做一些飘落樱花的效果。
5、在分叉,画花瓣等地方多使用一些随机数,树形状不能太单一
最终效果如下:
完整代码如下:
canvas{
position: absolute;
left: 0;
top: 0;
}
//两个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){//飘到树根的花瓣移除
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);
java代码画樱花_樱花的季节,教大家用CANVAS画出飞舞的樱花树相关推荐
- java代码画樱花飘落_樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 第一步,我们先画出一棵树的主体. 我 ...
- 樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...
- python自动填写小程序表单_新年好!教大家用Python写一个自动回复拜年信息的小程序!...
原标题:新年好!教大家用Python写一个自动回复拜年信息的小程序! 过年期间,想必大家都收到很多拜年信息吧!有没有也被拜年短信(大部分是群发)搞得很焦虑?不回复似乎显得很没有礼貌,一一回复又累心劳神 ...
- 用python画校门_开学季,教你用Python画大学教室座位神分区图!网友直呼“中枪”...
转载自恋习Python(ID:sldata2017) 我们上过大学的朋友们都知道,大学没有固定教室也没有固定的座位,所以大家可以随便找个自己喜欢的位置坐下. 别看这些不起眼的座位,感觉没什么差别.其实 ...
- 圣诞节快到了,教大家用Python画一个简单的圣诞树和烟花,送给那个她
用Python画出圣诞树和烟花,瞧瞧我这简易版的吧 序言 圣诞树 效果展示 代码展示 圣诞树上加烟花 效果展示 代码展示 写在最后 序言 这不是圣诞节快到了,准备让让女朋友开心开心,也算是亲手做的,稍 ...
- 教大家用python画皮卡丘的脸
仅以此程序送给我的姐姐,嘻嘻~ 效果图 用到的库是python的标准库turtle. 话不多说,上程序! 1.导入turtle库 2.写皮卡丘各部位的函数 鼻子: 眼睛: 脸: 嘴巴: 配置画笔画布参 ...
- python画人民大会堂_太震撼了,我用python画出全北京的公交线路动图
原标题:太震撼了,我用python画出全北京的公交线路动图 今天教大家用pyecharts制作北京市公交线路动态图,这应该是全网唯一一篇能正常运行的教程 一.获取百度秘钥 首先,本项目需要引用百度地图 ...
- 圣诞礼物c语言代码大全,圣诞节到咯,教大家用C语言画个圣诞树
原标题:圣诞节到咯,教大家用C语言画个圣诞树 先分享一段代码 #小编微信 13652748813 QQ 897775054 #include #include #include #include #d ...
- 用python画汽车_太震撼了,我用 Python 画出了全北京的公交线路动图
今天教大家用pyecharts制作北京市公交线路动态图,这应该是全网唯一一篇能正常运行的教程 一.获取百度秘钥 首先,本项目需要引用百度地图api,所以需要先注册获取百度开放平台秘钥,地址为: htt ...
最新文章
- 墨卡托坐标转换成经纬度
- 技术的那些事儿_3_西方技术管理的精髓
- 使用 trait 时报PHP Parse error: syntax error, unexpected 'use' (T_USE) 这个错误
- qt ui界面加入qsplitter_UI 文件设计与运行机制
- 从Script到Code Blocks、Code Behind到MVC、MVP、MVVM
- leetcode 344. 反转字符串 541. 反转字符串 II 双指针解
- Java PushbackReader ready()方法与示例
- 最便宜iPad曝光 苹果给力了!
- SqlServer递归查询树形结果数据
- weka连接mysql数据库
- React-Native 仿喜马拉雅APP项目笔记(多环境配置 项目配置路径 堆栈式导航)
- 全速jpg转换成pdf转换器v1.0官方版
- php生成微信小程序二维码
- 求职过程中展示您的社交技巧
- 乌云曝光铁道部12306网站出现SQL漏洞
- github可以跨月显示日期的jquery日历插件pickadate
- SCSI——小型计算机系统接口
- 8、C语言printf函数与scanf函数
- 服务器芯片市场容量,未来内存接口芯片市场规模 使用内存接口芯片的服务器内存模组主要有寄存内存模组(RDIMM)和减载内存模组(LRDIMM)两种。RDIMM需要一颗寄... - 雪球...
- 深入理解 Java 反射:Class (反射的入口)