128kj
- 浏览: 583807 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314：
相同的元素呢
一种离散化方法 -
HelloSummerR：
圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio：
好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java) -
肖泽文：
太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画 -
swm8023：
删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）
点击这里可以查看动画效果：
http://www.108js.com/article/article3/zip1/BezierAnim.html
欢迎访问博主的网站：http://www.108js.com
效果图：
代码：
<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.onload=init;
</script></boey></html>
热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html
http://www.108js.com/article/article3/zip1/BezierAnim.html
欢迎访问博主的网站：http://www.108js.com
效果图：
代码：
<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.onload=init;
</script></boey></html>
热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html
0
顶
顶
0
踩
踩
分享到：
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10024效果图： 效果链接：http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2367效果图： 效果链接： http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12896效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7386效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1580效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3201网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1372接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）
2014-07-04 13:08 1662接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2335在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2489今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1076效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1932效果图： 点击看效果： http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1661先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1902看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2919一直在学习HTML5 Canvas相关内容，游戏，动画 ... -
javaScript 广度优先搜索法"自动推箱子"（二）
2014-06-12 09:57 1292接上文： javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1781用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2216欢迎访问博主的网站：http://www.108js.com ... -
javascript for语句最佳实践
2014-05-22 08:22 543当执行冗长的for语句时，要保持语句块的尽量简洁，例如： 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2410<!DOCTYPE HTML> <html& ...
相关推荐
贝塞尔曲线实现直播点赞效果
2.23_quadraticCurveTo，二次贝塞尔曲线｜canvas曲线的绘制（圆弧和贝塞尔曲线）｜Canvas图形、动画、
2.22_用canvas绘制一角弯月｜canvas曲线的绘制（圆弧和贝塞尔曲线）｜Canvas图形、动画、游戏开发从入门到精通全
2.24_bezierCurveTo，三次贝塞尔曲线｜canvas曲线的绘制（圆弧和贝塞尔曲线）｜Canvas图形、动画、游戏开
2.25_canvas曲线的绘制小结｜canvas曲线的绘制（圆弧和贝塞尔曲线）｜Canvas图形、动画、游戏开发从入门到精通全
2.20_arc，圆弧和圆角矩形｜canvas曲线的绘制（圆弧和贝塞尔曲线）｜Canvas图形、动画、游戏开发从入门到精通全系列
2.21_arcTo，另一种弧线绘制方法｜canvas曲线的绘制（圆弧和贝塞尔曲线）｜Canvas图形、动画、游戏开发从入门到精
第1章 基础知识 1 1.1 canvas元素 1 1.1.1 canvas元素的大小与绘图表面的大小 4 1.1.2 canvas元素的api 5 1.2 canvas的绘图环境 6 1.2.1 2d绘图环境 6 1.2.2 canvas状态的保存与恢复 8 1.3 本书程序清单的...
由于原生的Canvas最高只支持到三阶贝塞尔曲线，那么我想添加多个控制点怎么办呢？（即便大部分复杂曲线都可以用3阶贝塞尔来模拟）与此同时，关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控制点设置为多少...
通过使用贝塞尔曲线规划运动路径，形成流体的运动效果。
1：贝塞尔曲线原理和实例（如贝塞尔曲线画圆，圆变心，粘性小红点） 2：PathNeasure原理和实例（旋转的小箭头） 3：属性动画原理和实例（雷达图，指示器，插值器。购物车。） 4：Scroller和VeloccityTracker 5：...
slicease.js，这是个应用于网站头部的3D图片切换的开源项目(MIT)，使用html5 canvas绘制的逐帧动画，缓动采用的是贝塞尔曲线来定义的，css3 as3等缓动也大都是这样做的。
简易制作贝塞尔曲线动画（JS css3 canvas）
本文为大家分享了Android仿小度语音助手的贝塞尔曲线动画，供大家参考，具体内容如下 废话不多说，看下面的动图，和百度的还是有点点差别，我也不修改了，很简单，我实在是没有多余的时间，还要学习其他的东西。 ...
工作中要做一个大屏展示界面（HTML），要将信息发送过程要用动画示意出来，采用canvas实现。 经过翻阅其他博主的文章，修改了了这个Demo版本。
这里所谓的自定义路径不单单包括一条直线，也许是多条直线的运动组合，甚至还包含了贝塞尔曲线，因此，这个动画也许是下面这个样子的： 那么如何才能在canvas中实现这种动画效果呢？其实很简单，对于路径的处理svg...
用canvas及贝塞尔曲线实现的一个动画的加载过程动画，
使用 canvas 实现波浪效果的原理与 SVG 一样，都是利用路径绘制出三次贝塞尔曲线并赋予动画效果。 主要是利用了动态绘制 ctx.bezierCurveTo() 三次贝塞尔曲线实现波浪的运动效果。 纯 CSS 实现波浪效果（这里背景是...
* 二次贝塞尔曲线动画 * @param {Array<number>} start 起点坐标 * @param {Array<number>} 曲度点坐标(也就是转弯的点,不是准确的坐标,只是大致的方向) * @param {Array<number>} end 终点坐标 * @param {...