Javascript 如何在遵循以下模式的代码中使用请求动画帧？
我已经解决这个问题好几天了。我第一次用构造函数模式编写代码。我想在转换中扩展10条bezier线的高度。我尝试了kineticjs（我失败了），尝试了Setinterval（在动画中创建jerk）。所以我最后求助于requestAnimationFrame。但是由于这个构造函数模式，我完全不知道应该把它包括在哪里，应该做什么改变 这就是我到目前为止所做的--- 所以基本上我会在过渡中扩展我的endY和cpY1和cpy2。在画布的mouseover上，所有贝塞尔线的高度必须在过渡中增加，给它一种动画般的感觉 JAVASCRIPT:Javascript 如何在遵循以下模式的代码中使用请求动画帧？,javascript,constructor,prototype,bezier,requestanimationframe,Javascript,Constructor,Prototype,Bezier,Requestanimationframe,我已经解决这个问题好几天了。我第一次用构造函数模式编写代码。我想在转换中扩展10条bezier线的高度。我尝试了kineticjs（我失败了），尝试了Setinterval（在动画中创建jerk）。所以我最后求助于requestAnimationFrame。但是由于这个构造函数模式，我完全不知道应该把它包括在哪里，应该做什么改变 这就是我到目前为止所做的--- 所以基本上我会在过渡中扩展我的endY和cpY1和cpy2。在画布的mouseover上，所有贝塞尔线的高度必须在过渡中增加，给它一种动
//for entire code please have a look at the fiddle.this is just 10% of my code
//for simplification purpose,you can use 3 instances instead of 9!!!
(function() {
hair = function() {
return this;
};
hair.prototype={
draw_hair:function(a,b,c,d,e,f,g,h){
var sx =136+a;//start position of curve.used in moveTo(sx,sy)
var sy =235+b;
var cp1x=136+c;//control point 1
var cp1y=222+d;
var cp2x=136+e;//control point 2
var cp2y=222+f;
var endx=136+g;//end points
var endy=210+h;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.strokeStyle="grey";
context.lineWidth="8";
context.beginPath();
context.moveTo(sx,sy);
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy);
context.lineCap = 'round';
context.stroke();
}
};
})();
这是你想要的关于长头发的答案 这也有您想要的关于如何创建头发“对象”的信息 代码和小提琴：
正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
window.requestAnimationFrame=（函数（回调）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
//头发“对象”
//Hair是承载用户指定的#个头发的包含对象
var Hair=（函数（）{
//建造师
功能头发（x、y、宽度、高度、发数）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
这个。高度=高度；
this.right=this.x+this.width；
this.bottom=this.y+this.height；
this.hairCount=hairCount；
这个.startX=x+20；
this.startY=y+height-3；//235；
这个。头发高度=25；
这个。毛发生长=0；
this.lastEndX=[]；
for（var i=0；iI获取您的代码并创建了一个Hair“类”带有构造函数的版本完成。您为该类提供了所需的头发数量，它会根据需要将所有头发作为一个组进行绘制/重画。我这样做是为了提高性能，因为mousemove处理程序只需响应1个组，而不是9个单独的对象。我还在该类上添加了一个方法，可以使头发生长。正如我们所讨论的，这是通过提高控制点和端点的“Y”坐标来实现的。祝您的项目好运。：）@马克：当我检查长发的那一刻，它们又变短了，这不是我想要的……但没关系……我会从这里开始，谢谢马克！！！说真的…但除了编码，还有一个小问题，是什么让你在56岁的时候还能活下去！！！#尊敬的，当我每天学习新东西的时候，我最开心。到目前为止，生活已经提供了足够多的乐趣需要学习的东西！var hair=新头发（25,50150,50,8）；现在我认为这就是您创建的实例。但我不清楚什么是引用的，即Hair是外部对象，函数名，direction=0.25的用途是什么？回调函数和settimeout的意义是什么？我注释了代码并执行了它，但它在我的chrome浏览器中运行良好。See我对你的问题的附加回答：：）new Hair（25,50150,50,8）---这个函数或类中的Hair是什么？-我问的原因是你正在向Hair传递参数。如果你看到我前面的示例，你会注意到这件事：-----var Hair（aka对象）=new Hair（aka类）；Hair.draw_Hair（para1，para2）不……不难——真正理解很容易！实验+理解==成功。把他们的代码分解成一根草。玩！在画布上建立一个一根头发的游乐场。玩！当你真正理解三次贝塞尔曲线的性质及其控制+终点时，你的任务就变得容易了。真的！；）但是，如果不了解曲线，你就在黑暗的房间里投掷飞镖。有了了解，基于鼠标移动弯曲曲线就很简单，就像用手移动自己的头发一样）。因此…不要复制cssdeck.com（这是一个很好的代码）。相反，尝试一下它+了解！！
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
window.requestAnimationFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
// the Hair "object"
// Hair is a containing object that hosts a user-specified # of hairs
var Hair = (function () {
// constructor
function Hair(x,y,width,height,haircount) {
this.x=x;
this.y=y;
this.width=width;
this.height=height;
this.right=this.x+this.width;
this.bottom=this.y+this.height;
this.hairCount=haircount;
this.startX=x+20;
this.startY=y+height-3; //235;
this.hairHeight=25;
this.hairGrowth=0;
this.lastEndX=[];
for(var i=0;i<haircount;i++){
this.lastEndX[i]= x+20+(i*15);
}
}
// grows the hair
// works by changing the Y value of the end & control points
Hair.prototype.grow = function(increment){
this.hairGrowth+=increment;
return(this.hairGrowth);
}
// draw all the hairs
Hair.prototype.draw = function(mouseX){
// clear this object's space on the canvas
// and set its styles
ctx.clearRect(this.x,this.y,this.width,this.height);
ctx.beginPath();
ctx.strokeStyle="grey";
ctx.lineWidth=7;
ctx.lineCap = 'round';
ctx.beginPath();
for(var i=0;i<this.hairCount;i++){
// straight hair
var sx=cp1x=cp2x= this.startX+(i*15);
var sy= this.startY;
var cp1y = cp2y = (this.startY-(this.hairHeight+this.hairGrowth)/2);
var endy = this.startY-this.hairHeight-this.hairGrowth;
var endx = this.lastEndX[i];
// create bend, if any
if(Math.abs(mouseX-sx)<=10){
endx = sx+(mouseX-sx)*1.1;
this.lastEndX[i]=endx;
};
// draw this curve
ctx.moveTo(sx,sy);
ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy);
}
// stroke
ctx.stroke();
// temp outline
ctx.lineWidth=1;
ctx.beginPath();
ctx.rect(this.x,this.y,this.width,this.height);
ctx.stroke();
}
//
return Hair;
})();
var direction=1;
var fps = 3;
function animate() {
setTimeout(function() {
// change hair length
var hairLength=hair.grow(direction);
if(hairLength<1 || hairLength>10){ direction=(-direction); }
// draw
hair.draw();
// request next frame
requestAnimationFrame(animate);
}, 1000 / fps);
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
$("#movelog").html("Move: "+ mouseX + " / " + mouseY);
// Put your mousemove stuff here
if(mouseX>=hair.x && mouseX<=hair.right && mouseY>=hair.y && mouseY<=hair.bottom){
hair.draw(mouseX);
}
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#grow").click(function(e){ animate(); });
// create a new patch of hair
var hair=new Hair(25,50,150,50,8);
hair.draw(225);
}); // end $(function(){});
</script>
</head>
<body>
<p id="movelog">Move</p>
<canvas id="canvas" width=300 height=200></canvas><br>
<button id="grow">Grow Hair</button>
</body>
</html>