Canvas:樱花树之恋
来源:互联网 发布:linux中启动tomcat 编辑:程序博客网 时间:2024/04/27 19:31
一、代码
<!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>//两个canvasvar 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);</script></body></html>
效果演示
一一一一一一一一一一一一一一一一一一一一一一一一一 传送门 一一一一一一一一一一一一一一一一一一一一一一一一一一一
文章系转载,更多详情见:樱花的季节,教大家用canvas画出飞舞的樱花树
阅读全文
0 0
- Canvas:樱花树之恋
- 樱花
- 樱花
- 《浪漫樱花之旅——日本樱花拍摄游感》
- Canvas之 canvas.save()与canvas.restore()
- 樱花树下的秒速5厘米
- 樱花雨
- 樱花雨
- 樱花赞
- 《樱花抄》
- SWT之Canvas绘图
- Html5 之 Canvas
- HTML5研究之canvas
- android画图之canvas
- Html5系列之Canvas
- JavaFX之Canvas
- Canvas之变换初步
- html5之canvas
- Delphi 接口:两个接口有相同名称的方法
- 毕业季的你准备好面试了吗?(下)
- 比赛总结
- 设计师应该专注细分领域还是要综合发展?
- javap(反汇编命令)详解
- Canvas:樱花树之恋
- 阿里巴巴前端专家渚薰:H5互动的正确打开方式
- ButterKnife在Eclipse的应用
- 让我们一起努力渡过难关
- windows下搭建vue开发环境
- shell
- HDU 1181 变形课(DFS)
- PHP的一些时间上的问题
- 使用WebUploader上传文件,,简单的配置过程