html代码表白树

如果你是一名程序员，那么一颗代码表白树一定可以帮助你向心仪的人表达爱意。HTML代码表白树就是一种表白工具。下面我们就来一起学习如何制作一颗HTML代码表白树。

//HTML代码表白树!DOCTYPE html>
    html>
    head>
    title>
    表白树/title>
    /head>
    body>
    canvas id="canvas">
    /canvas>
    script type="text/javascript">
    var points = [];
    for(var i=0;
    i100;
i++){
      var x=Math.random()*300+50;
     //范围50-350  var y=Math.random()*300+50;
     //范围50-350  var radius=Math.random()*2+1;
     //范围1-3  var radian=Math.random()*2*Math.PI;
     //范围0-360度  var speed=0.1*Math.random()+0.02;
 //范围0.02-0.12  var point={
    x:x,    y:y,    radius:radius,    radian:radian,    speed:speed  }
    ;
      points.push(point);
}
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
function draw(){
      //清空画布  context.clearRect(0,0,400,400);
      //循环绘制100个点  for(var i=0;
    i100;
i++){
        var point=points[i];
        point.radian+=point.speed;
        point.x=point.x+Math.cos(point.radian)*point.radius;
        point.y=point.y+Math.sin(point.radian)*point.radius;
        context.beginPath();
        context.arc(point.x,point.y,point.radius,0,2*Math.PI);
        context.closePath();
        context.fillStyle="#F7819F";
        context.fill();
  }
}
    setInterval(draw,30);
    /script>
    /body>
    /html>
    

通过上面的代码，你可以得到一颗闪闪发光的表白树，同时你也可以根据自己的喜好进行代码的改变，添加相应的表白内容。当然，最重要的是要真心准备好向对方表白哦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！