Canvas前端开发的动画实例_画一棵树

h5动画制作 web前端开发|前端动画都是用什么开发?|网站前端开发

html 代码片段

<!DOCTYPE html>
<head>
<metacharset=”utf-8″>
<metahttp-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>前端开发好用的动画插件</title>
<metaname=”description” content=””>
<metaname=”keywords” content=””>
<style type=”text/css”>
body{
margin:0;
padding:0;
overflow:hidden;
}
</style>
</head>
<body>
<script type=”text/javascript”>
varTree= (function(){
varcanvas=document.createElement(“canvas”),
ctx=canvas.getContext(“2d”),
W= window.innerWidth,
H= window.innerHeight;
varmaxAngle=Math.PI/2,
maxBranch=3;
canvas.height =H;
canvas.width =W;
document.body.appendChild(canvas);
varinit=function(x,y){
varx=x||W/2,
y=y||H/2+100;
draw(x,y,60,-Math.PI/2,12,12);
}
vardraw=function(startX,startY,length,angle,depth,branchWidth){
varcolor,endX,endY,subBranches,newAngle,newLength;
ctx.beginPath();
ctx.moveTo(startX,startY);
endX=startX+length*Math.cos(angle);
endY=startY+length*Math.sin(angle);
ctx.lineCap=’round’;
ctx.lineWidth=branchWidth;
ctx.lineTo(endX,endY);
if (depth–<=2) {
color=’rgb(0,’+ (rand(128,192) >>0) +’,0)’;
}else{
color=’rgb(‘+ (rand(64,128) >>0) +’,50,25)’;
}
ctx.strokeStyle=color;
ctx.stroke();
if (!depth) return;
subBranches=rand(1,maxBranch);
branchWidth*=0.7;
for (vari=0;i<subBranches;i++) {
newAngle=angle+rand(-Math.PI/4,Math.PI/4);
newLength=length*rand(0.7,1);
draw(endX,endY,newLength,newAngle,depth,branchWidth)
}
}
varrand=function(min,max){
returnMath.random() * (max-min) +min;
}
return{
init: init
}
})();
window.onload = function () {
Tree.init();
}
</script>
</body>
</html>

javascript 代码片段

var Tree = (function () {
varcanvas=document.createElement(“canvas”),
ctx=canvas.getContext(“2d”),
W= window.innerWidth,
H= window.innerHeight;
varmaxAngle=Math.PI/2,
maxBranch=3;
canvas.height =H;
canvas.width =W;
document.body.appendChild(canvas);
varinit=function(x,y){
varx=x||W/2,
y=y||H/2+100;
draw(x,y,60,-Math.PI/2,12,12);
}
vardraw=function(startX,startY,length,angle,depth,branchWidth){
varcolor,endX,endY,subBranches,newAngle,newLength;
ctx.beginPath();
ctx.moveTo(startX,startY);
endX=startX+length*Math.cos(angle);
endY=startY+length*Math.sin(angle);
ctx.lineCap=’round’;
ctx.lineWidth=branchWidth;
ctx.lineTo(endX,endY);
if (depth–<=2) {
color=’rgb(0,’+ (rand(128,192) >>0) +’,0)’;
}else{
color=’rgb(‘+ (rand(64,128) >>0) +’,50,25)’;
}
ctx.strokeStyle=color;
ctx.stroke();
if (!depth) return;
subBranches=rand(1,maxBranch);
branchWidth*=0.7;
for (vari=0;i<subBranches;i++) {
newAngle=angle+rand(-Math.PI/4,Math.PI/4);
newLength=length*rand(0.7,1);
draw(endX,endY,newLength,newAngle,depth,branchWidth)
}
}
varrand=function(min,max){
returnMath.random() * (max-min) +min;
}
return{
init: init
}
})();

前端动画的开发工具|微信开发前端动画|前端动画都是用什么开发

» 本文来自:前端开发者 » 《Canvas前端开发的动画实例_画一棵树》
» 本文链接地址:https://www.rokub.com/3620.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!