樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果。
废话少说,先看效果。
演示效果地址:http://suohb.com/work/tree4.htm
查看演示效果
第一步,我们先画出一棵树的主体。
我画树的使用的原理是,定义一个起始点,从这个点开始,向一个角度移动一段距离。得到另一个点。
画出一条线连接两个点。
以新得到的点,依旧向这个角度,移动一段距离。得到第三个点,连写第二第三个点。
以此类推。一定步长之后,就得到一条射线。
我们根据自然界中的真实树的情况,这条线越来越细,直到最细地方结束。
<body bgcolor="#000000"> <canvas id="tree"></canvas> <script> 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); </script> </body>
树干出来之后,要做分叉,每个分叉其实就是向另一个方向的树干。
而且分叉要比主干细一些。我们在第二阶段树干位置,每三步向左右分叉。
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()*2tCxt.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、在分叉,画花瓣等地方多使用一些随机数,树形状不能太单一
最终效果如下:
完整代码如下:
<!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()*2tCxt.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); </script> </body> </html>
查看演示效果
更多特效,请关注我的微信公众号。
转载于:https://www.cnblogs.com/shb190802/p/6606699.html
樱花的季节,教大家用canvas画出飞舞的樱花树相关推荐
- java代码画樱花_樱花的季节,教大家用CANVAS画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 第一步,我们先画出一棵树的主体. 我 ...
- java代码画樱花飘落_樱花的季节,教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 第一步,我们先画出一棵树的主体. 我 ...
- 圣诞节快到了,教大家用Python画一个简单的圣诞树和烟花,送给那个她
用Python画出圣诞树和烟花,瞧瞧我这简易版的吧 序言 圣诞树 效果展示 代码展示 圣诞树上加烟花 效果展示 代码展示 写在最后 序言 这不是圣诞节快到了,准备让让女朋友开心开心,也算是亲手做的,稍 ...
- 教大家用python画皮卡丘的脸
仅以此程序送给我的姐姐,嘻嘻~ 效果图 用到的库是python的标准库turtle. 话不多说,上程序! 1.导入turtle库 2.写皮卡丘各部位的函数 鼻子: 眼睛: 脸: 嘴巴: 配置画笔画布参 ...
- 圣诞礼物c语言代码大全,圣诞节到咯,教大家用C语言画个圣诞树
原标题:圣诞节到咯,教大家用C语言画个圣诞树 先分享一段代码 #小编微信 13652748813 QQ 897775054 #include #include #include #include #d ...
- python自动填写小程序表单_新年好!教大家用Python写一个自动回复拜年信息的小程序!...
原标题:新年好!教大家用Python写一个自动回复拜年信息的小程序! 过年期间,想必大家都收到很多拜年信息吧!有没有也被拜年短信(大部分是群发)搞得很焦虑?不回复似乎显得很没有礼貌,一一回复又累心劳神 ...
- 小福利,教大家用excel函数实现切片器的功能
小福利,教大家用excel函数实现切片器的功能 源数据如下图所示 我们要实现的效果是如下图: 当我们选择不同街道的时候,会显示出所有的楼盘名称和价格,制作成柱状图 第一步,选择所有街道名称复制到she ...
- 教大家用按键精灵写一个快手自动抢红包脚本
教大家用按键精灵写一个快手自动抢红包脚本 先设计好界面,为了节省大家的时间,界面方面我们早就设计好了,请看下面 设计好界面后就进入写代码的步骤,这个其实你可以先录制一遍,然后把录制的代码进行二次修改, ...
- 如何用 canvas 画出分形图
前言 分形是一门以非规则几何形态为研究对象的几何学,由曼德勃 罗(B.B.Mandelbrot)等人创立并命名. 分形图从整体上看,是处处不规律的.但从局部观察,图形的规则性又是相同的,即具有自相似的 ...
最新文章
- LeetCode 202. Happy Number--Python解法--数学题
- 【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现
- NOI 2015 品酒大会
- 暂时放在首页,因为需要大家帮忙!!
- Cache替换算法:LRU与LFU的区别
- 【计蒜客 - 蓝桥训练】阶乘位数(数学,对数运算,求阶乘位数)
- JAVA入门级教学之(IDEA工具的快捷键和简单设置)
- java 文件名空格,java关于文件名带有空格的个人见解
- 从语音识别到语义识别还有多少路要走?
- Struts初学者教程
- 大数据分析推动业务增长的方法有哪些
- Android开发/源码资源汇总
- oracle into 循环,oracle游标中使用select into查询结果为NULL导致异常提前退出循环——菜鸟解决办法(^_^)...
- maya多边形建模怎样做曲面_maya中的曲面模型怎么转换成多边形?
- 将本地电脑文件复制到虚拟机系统中详细方法
- 火影忍者“背后的故事”
- 抽卡游戏的随机机制(转载)
- vue将链接转为二维码的方法即插件
- web性能优化 JS/CSS CDN加速公共库
- 淘宝、天猫、京东主图及详情页尺寸
热门文章
- java BIO tcp服务端向客户端消息群发代码教程实战
- 微信辅助注册平台源码
- Android-x86-6.0定制之路 - 在Ubuntu 16.04.5上编译
- 计算机在职研是不是双证,计算机双证在职研究生好考吗?
- 计算机应用基础客观答案,20春国家开放大学计算机应用基础客观题资料参考答案...
- java判定成绩等级_Java编程判断一组学生成绩等级
- 9 个美观大气的后台管理系统
- 跟alex学python_跟Alex学Python之
- css和html的用法,HTML与CSS之CSS的基本使用
- 基础通用版IPv6转换服务使用说明及设置示例