画布:制作贝塞尔曲线绘制动画
Canvas: Animate bezier curve drawing
im试图画一条从左到右穿过画布的线。我仍然处于早期阶段来实现这一点
timer = window.setInterval(draw_line, 30);
我的绘图功能就像这个
function draw_line()
{
context.fillStyle = "#000";
context.fillRect(0, 0, canv.width, canv.height);
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = '#fff';
//Where p1, p2, cp1, cp2 are point objects that has x & y values already defined
context.moveTo(p1.x, p1.y);
context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
context.stroke();
context.closePath();
// now i have to move p1, p2 ,cp1,cp2
// now here is my problem
}
我知道我需要移动p1.x+= a random number;
,对于cp1和cp2也是如此,但p2终点呢?它应该遵循相同的轨迹!我怎样才能做到这一点?
感谢
编辑的答案
有了你的澄清,我想我现在可以恰当地回答这个问题了。
为了使终点沿着起点穿过画布的路径,您必须存储历史值。在这个例子中,http://jsfiddle.net/mobidevelop/bGgHQ/,我使用鼠标移动来填充最后16个位置的缓冲区,然后通过在RingBuffer上迭代来通过这些点形成贝塞尔曲线。
function RingBuffer(length) {
this.length = length;
this.pointer = 0;
this.buffer = [];
}
RingBuffer.prototype.get = function(index) {
if (index < 0) {
index += this.length;
}
return this.buffer[index];
}
RingBuffer.prototype.push = function(value) {
this.buffer[this.pointer] = value;
this.pointer = (this.length + this.pointer +1) % this.length;
}
var c = document.getElementById("myCanvas");
var context =c.getContext("2d");
timer = window.setInterval(draw_line, 30);
function Point(x,y) {
this.x = x;
this.y = y;
}
Point.prototype.translateX = function(x) {
return this.x += x;
};
Point.prototype.translateY = function(y) {
return this.y += y;
};
function draw_line()
{
context.fillStyle = "#000";
context.fillRect(0, 0, c.width, c.height);
var pointer = history.pointer;
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = '#F00';
for (iteration = 0, count = 15; iteration < count; iteration += 3) {
var p1 = history.get(--pointer);
var p2 = history.get(--pointer);
var p3 = history.get(--pointer);
var p4 = history.get(--pointer);
if (p1 && p2 && p3 && p4) {
context.moveTo(p1.x, p1.y);
context.bezierCurveTo(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
}
pointer++;
}
context.stroke();
context.closePath();
}
var history = new RingBuffer(16);
var lastGrab = new Date();
c.addEventListener('mousemove', function() {
now = new Date();
if (now - lastGrab > 15) {
history.push(new Point(event.clientX - c.offsetLeft, event.clientY - c.offsetTop));
lastGrab = now;
}
});
出于历史目的,上一个答案留在下面
我不确定我是否完全理解你想要实现的目标,但我认为你所需要做的就是用同样的价值来翻译你的所有观点。这将导致穿过画布的线保持相同的形状。像这样的东西:
JSFiddle
var c = document.getElementById("myCanvas");
var context =c.getContext("2d");
timer = window.setInterval(draw_line, 30);
function Point(x,y) {
this.x = x;
this.y = y;
}
Point.prototype.translateX = function(x) {
return this.x += x;
};
Point.prototype.translateY = function(y) {
return this.y += y;
};
var p1 = new Point(0,0);
var p2 = new Point(100,100);
var cp1 = new Point(15,45);
var cp2 = new Point(85,45);
function draw_line()
{
context.fillStyle = "#000";
context.fillRect(0, 0, c.width, c.height);
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = '#fff';
//Where p1, p2, cp1, cp2 are point objects that has x & y values already defined
context.moveTo(p1.x, p1.y);
context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
context.stroke();
context.closePath();
p1.translateX(1);
p2.translateX(1);
cp1.translateX(1);
cp2.translateX(1);
if (p1.x > 300) {
p1.translateX(-400);
p2.translateX(-400);
cp1.translateX(-400);
cp2.translateX(-400);
}
}
除非我误解了目标。。。
相关文章:
- 画布:制作贝塞尔曲线绘制动画
- 在谷歌地理图中绘制两点之间的曲线
- 在新框架上绘制图像,同时仍然使用P5.js中的利萨茹曲线
- 在滚动上绘制一条曲线虚线 SVG
- 绘制具有 JS 中平均值和标准偏差的正态分布曲线
- 在 WebGL 中的曲面上绘制曲线
- 绘制正态分布曲线,左下角区域在 javascript 中带有阴影
- 如何使用 svg 循环绘制贝塞尔曲线
- 用createjs绘制一个虚线曲线
- HTML5 画布:加载时绘制的贝塞尔曲线
- 在HTML5画布上慢慢绘制二次曲线
- 在HTML5画布上复制曲线时未绘制点
- 如何使用javascript HTML5画布绘制通过N个点的曲线
- 如何使用CSS和JavaScript绘制正态分布曲线(Bell曲线)
- 如何绘制曲线svg路径
- 如何在画布上绘制文本,该文本遵循使用二次曲线方法绘制的二次曲线
- 如何在HTML画布上绘制具有可变厚度的贝塞尔曲线
- 如何使用bezierCurveTo动态绘制曲线
- 如何在Javascript中绘制3d blezier曲线?(three.js, webGL)
- 用二次贝塞尔曲线和三次贝塞尔曲线绘制椭圆