canvas 绘制鸡蛋代码实例
分类：实例代码
分享一段代码实例，它实现了利用canvas绘制鸡蛋的效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
canvas 绘制鸡蛋代码实例，这样的场景在实际项目中还是用的比较多的，关于canvas 绘制鸡蛋代码实例就介绍到这了。
canvas 绘制鸡蛋代码实例属于前端实例代码，有关更多实例代码大家可以查看。