canvas教程

Html5的Canvas雪花特效实现教程

字号+ 作者:H5之家 来源:H5之家 2017-11-05 15:01 我要评论( )

这个效果还不错吧,这是html5的Canvas效果,源码如下: canvas id=mc width=420 height=280 style=border:1px solid black /canvas script type=text/javascript

 这个效果还不错吧,这是html5的Canvas效果,源码如下:

Html5的Canvas雪花特效实现教程


 


<canvas id="mc" width="420" height="280" style="border:1px solid black" ></canvas >
<script type="text/" >
function createFlower(context,n,dx,dy,size,length){
context.beginPath();
context.moveTo(dx,dy+size);
var dig = 2*Math.PI/n;
for(var i=1;i<n+1;i++){
var ctrlX = Math.sin((i-0.5)*dig)*length+dx;
var ctrlY = Math.cos((i-0.5)*dig)*length+dy;
var x = Math.sin(i*dig)*size+dx;
var y = Math.cos(i*dig)*size+dy;
context.quadraticCurveTo(ctrlX,ctrlY,x,y);
}
context.closePath();
}
snowPos = [
{x:50,y:44,z:5},{x:140,y:35,z:3},
{x:360,y:20,z:1},{x:250,y:50,z:2},
{x:110,y:90,z:4},{x:310,y:85,z:2},
{x:65,y:160,z:5},{x:205,y:130,z:5},
{x:300,y:150,z:3},{x:260,y:210,z:1},
{x:375,y:215,z:3},{x:155,y:230,z:2},
{x:30,y:270,z:4},];
function fall(context){
context.fillStyle = "#000";
context.fillRect(0,0,420,280);
context.fillStyle = "#fff";
for(var i=0,len=snowPos.length;i<len;i++){
context.save();
context.translate(snowPos[i].x,snowPos[i].y);
context.rotate((Math.random()*6-3)*Math.PI/10);
snowPos[i].y += Math.random()*18;
if(snowPos[i].y >280){
snowPos[i].y=4;
}
createFlower(context,6,0,0,snowPos[i].z,8);
context.fill();
context.restore();
}
}
var canvas = document.getElementById("mc");
var ctx = canvas.getContext("2d");
setInterval("fall(ctx);",200);
</script >

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5教程(四)Canvas的相关推荐

    HTML5教程(四)Canvas的相关推荐

    2017-11-05 14:01

  • jQuery CSS3 超炫的Loading动画特效

    jQuery CSS3 超炫的Loading动画特效

    2017-10-31 08:22

  • HTML5 学习笔记(四)canvas绘图、WebGL、SVG

    HTML5 学习笔记(四)canvas绘图、WebGL、SVG

    2017-10-25 11:21

  • H5学习之5 canvas的运用

    H5学习之5 canvas的运用

    2017-10-25 08:27

网友点评
e