快捷导航
蚂蚁部落 网站首页 实例代码 canvas实例 查看内容

canvas 绘制鸡蛋代码实例

2017-5-4 13:58| 发布者: admin| 查看: 966| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了利用canvas绘制鸡蛋的效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#canvas {
  width: 400px;
  height: 180px;
  background: white;
  margin: 0 auto;
  border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var a = 0,
  point;
var intervals = .001;
var timmerId = setInterval(function() {
    if (a < 1) {
      for (var b = 0; b < 1; b += intervals) {
        if (point = surface(a, b)) {
          context.fillStyle = "rgb(" + point.r + "," + point.g + ", " + point.b + ")";
          context.fillRect(point.x, point.y, 1, 1);
        }
      }
    } else {
      clearInterval(timmerId);
    }
    a += intervals;
  },
  0);

function square(v) {
  return v * v;
}

function surface(a, b) {
  var x = a * 100 + 50,
    y = b * 100,
    radius = 50,
    x0 = 100,
    y0 = 50;
  if (square(x - x0) + square(y - y0) < square(radius)) {
    var cx = 1 - square(a - 0.7) * 2 - square(b - 0.4) * 2;
    return {
      x: x,
      y: y * (b + 2) / 2,
      r: 130 + Math.floor(cx * 120),
      g: 77 + Math.floor(cx * 160),
      b: 43 + +Math.floor(cx * 140)
    }
  }
  return null;
}
</script>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-23 21:34 , Processed in 0.064911 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部