我已经解决了这个问题好几天了。我第一次在构造函数模式中编写了我的代码。我想在转换中扩展10个贝塞尔线的高度。我尝试过kineticjs（我失败了），试过Setinterval （在动画中创建混蛋）。所以我最终使用了requestAnimationFrame.But，因为这个构造函数模式，我很困惑在哪里包含它以及要做出哪些更改。
这是我到目前为止所做的工作--- JSFIDDLE
所以基本上我会在转换中扩展我的endY和cpY1和cpy2。在画布的范围内，所有贝塞尔线的高度必须在转换中增加，给它一个动画般的感觉。
JAVASCRIPT：
//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();
}
};
})();
答案 0 :(得分：0)
以下是您想要种植头发的答案。
这也有关于如何创建头发“对象”的信息。
代码和小提琴：http://jsfiddle.net/m1erickson/8K825/
<!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>
[已添加：解释“类”并从类中实例化对象]
var Hair=(function(){ …; return Hair; })()创建了一个Hair“类”。
var hair = new Hair(…)创建一个实际的，可用的Hair“对象”。
将Hair-class视为模板（或蓝图或千篇一律）。 Hair-class中的所有代码仅定义类的属性和方法。您实际上并没有调用Hair类中的任何代码。您只需将其用作模板即可创建实际的头发对象。
您可以使用Hair类创建任意数量的实际头发对象 - 它是可重用的。创建头发对象的行为被称为“实例化头发类”。
BTW，javascript实际上没有类，所以这只是一个伪类。但这是另一个解释！你问：方向= 0.25的用途是什么？
当动画期间头发“增长”时，方向变量用于逐渐增加头发的高度。 .25告诉头发的控制/终点每个动画帧上升0.25个像素。
你问：回调函数和settimeout的意义是什么？
setTimeout正在包装requestAnimationFrame，以便动画以固定的每秒帧数发生。
RequestAnimationFrame（RAF）在优化性能方面做得很好，但是单独使用RAF无法控制每秒帧数。如果在setTimeout中包装RAF，则可以控制每秒帧数。例如，当fps == 3时，setTimeout（anyFunction，1000 / fps）将触发anyFunction约3次。请参阅有关RAF + setTimeout的这篇精彩文章：http://creativejs.com/resources/requestanimationframe/
正如您所发现的，没有setTimeout的RAF仍然有效，但RAF会尝试尽快增长您的头发，而不是使用fps间隔。