canvas绘制抛物线代码实例

快乐打工仔 分类:实例代码

canvas绘制抛物线代码实例属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它实现了利用canvas绘制抛物线的功能。

点击页面的一个点即可开始绘制过程。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
</head>
<body>
<canvas></canvas>
<script>
(function() {
  var W = innerWidth,
    H = innerHeight;
  var cvs = document.querySelector("canvas"),
    ctx = cvs.getContext("2d"),
    isCast = false;
 
  cvs.width = W;
  cvs.height = H;
 
  function Parabola(x0, y0, x1, y1, vx, a) {
    var x = x1 - x0,
      y = y1 - y0;
    this.x0 = x0;
    this.y0 = y0;
    this.x1 = x1;
    this.y1 = y1;
    this.a = a || 0.002;
    this.b = (y - this.a * x * x) / x;
    this._x = 0;
    this.vx = (((x1 - x0) >> 31) * 2 + 1) * vx;
    this.radius = 5;
  }
 
  Parabola.prototype.cast = function(ctx) {
    var x = (this._x += this.vx),
      y = this.a * x * x + this.b * x,
      isArrived = Math.abs(x + this.x0 - this.x1) < Math.abs(this.vx);
    ctx.beginPath();
    isArrived ? ctx.arc(this.x1, this.y1, this.radius, 0, Math.PI * 2, true)
    : ctx.arc(x + this.x0, y + this.y0, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.stroke();
 
    return !isArrived;
  };
 
  document.addEventListener("click", function() {
    if (isCast) return;
    var x0 = Math.random() * W,
      y0 = Math.random() * H,
      x1 = Math.random() * W,
      y1 = Math.random() * H,
      radius = 5,
      parabola = new Parabola(x0, y0, x1, y1, 5);
 
    isCast = true;
 
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(x0, y0, radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
 
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.arc(x1, y1, radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
 
 
    function render() {
      if (parabola.cast(ctx)) {
        requestAnimationFrame(render);
      } else {
        isCast = false;
      }
    }
 
    render();
  }, false);
 
})();
</script>
</body>
</html>

canvas绘制抛物线代码实例,这样的场景在实际项目中还是用的比较多的,关于canvas绘制抛物线代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容