HTML5 Canvas贝塞尔曲线动画

最新推荐文章于 2024-08-16 15:33:06 发布

iteye_8466

最新推荐文章于 2024-08-16 15:33:06 发布

阅读量409

点赞数

分类专栏： javascript HTML5 动画游戏文章标签： html5 html JavaScript 浏览器 canvas ViewUI

HTML5 动画游戏同时被 2 个专栏收录

32 篇文章

订阅专栏

javascript

28 篇文章

订阅专栏

点击这里可以查看动画效果：
[url]http://www.108js.com/article/article3/zip1/BezierAnim.html[/url]
欢迎访问博主的网站：[url]http://www.108js.com[/url]

效果图：[img]http://dl2.iteye.com/upload/attachment/0097/3712/a93baf25-3447-3d64-9ae6-f952c3fa5daf.gif[/img]

代码：
<html>
<head>
<meta charset="gbk">
<title>贝塞尔曲线动画</title>
</head>
<body>
<canvas id = "myCanvas" width="300" height="200">你的浏览器不支持canvas</canvas>
<script>

window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

var canvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");

var animpts=[];
var deltas=[];
var gradient;//线性渐变
var w=canvas.width;
var h=canvas.height;

function main() {
context.clearRect(0, 0, w,h);
step(w,h);
render(w, h, context);
requestAnimFrame(function() {
main();
});
}

function init() {
gradient = context.createLinearGradient(0,0,200,200);
gradient.addColorStop(0,'red');
gradient.addColorStop(1,'yellow');

context.fillStyle = gradient;
context.strokeStyle="blue";
context.lineWidth=10;
reset(w,h);
render(w, h, context)
main();
}

function animate(pts, deltas, index, limit) {
var newpt = pts[index] + deltas[index];
if (newpt <= 0) {
newpt = -newpt;
deltas[index] = (Math.random() * 4 + 2);
} else if (newpt >= limit) {
newpt = 2 * limit - newpt;
deltas[index] = - (Math.random() * 4 + 2);
}
pts[index] = newpt;
}

function reset(w,h) {
for (var i = 0; i < 12; i += 2) {
animpts[i + 0] = (Math.random() * w);
animpts[i + 1] = (Math.random() * h);
deltas[i + 0] = (Math.random() * 6.0 + 4.0);
deltas[i + 1] = (Math.random() * 6.0 + 4.0);
if (animpts[i + 0] > w / 2) {
deltas[i + 0] = -deltas[i + 0];
}
if (animpts[i + 1] > h / 2) {
deltas[i + 1] = -deltas[i + 1];
}
}
gradient = context.createLinearGradient(0,0,w*0.7,h*0.7);
gradient.addColorStop(0,'red');
gradient.addColorStop(1,'yellow');
}

function step(w, h) {
for (var i = 0; i < 12; i += 2) {
animate(animpts, deltas, i + 0, w);
animate(animpts, deltas, i + 1, h);
}
}

function render(w, h, context) {
var ctrlpts = animpts;
var len = ctrlpts.length;
var prevx = ctrlpts[len - 2];
var prevy = ctrlpts[len - 1];
var curx = ctrlpts[0];
var cury = ctrlpts[1];
var midx = (curx + prevx) / 2;
var midy = (cury + prevy) / 2;
context.beginPath();
context.moveTo(midx, midy);
for (var i = 2; i <= ctrlpts.length; i += 2) {
var x1 = (midx + curx) / 2;
var y1 = (midy + cury) / 2;
prevx = curx;
prevy = cury;
if (i < ctrlpts.length) {
curx = ctrlpts[i + 0];
cury = ctrlpts[i + 1];
} else {
curx = ctrlpts[0];
cury = ctrlpts[1];
}
midx = (curx + prevx) / 2;
midy = (cury + prevy) / 2;
var x2 = (prevx + midx) / 2;
var y2 = (prevy + midy) / 2;
context.bezierCurveTo(x1, y1, x2, y2, midx, midy);
}
context.closePath();
context.stroke();
context.fill();
}

window.οnlοad=init;

</script></boey></html>
热情奉献：HTML5 Canvas绘图与动画学习59例源码：
[url]http://www.108js.com/example.html[/url]