我被困在了点。我想要的是在鼠标移动时画一条曲线(头发像弯曲)。这是我的代码。现在我只能画一条直线我不知道问题出在哪里,但是我想这可能与函数调用有关。欢迎任何帮助!!!
<html>
<body>
<canvas id="myCanvas" width="500" height="800"></canvas>
<script src="common.js"></script>
</body>
</html>
common.js
//获取鼠标位置的变量 var x1= 0, y1= 0, x2= 0, y2=0;
// co-ordinates of bezierCurveTo()
var sx=250;//for moveTo(x-cordinate)
var sy=450;//for moveTo(y-cordinate)
//control point1 and control point 2
var cp1x=250;
var cp1y=400;
var cp2x=250;
var cp2y=300;
//end cordinates
var endx=250;
var endy=50;
////////////////////////////////////////////////////////////////////////////
window.addEventListener("load",init,false);
//to draw a straight line.variables declared globally above
function init(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener("mouseover",get_xy_over,false);
canvas.addEventListener("mousemove",get_xy_move,false);
context.beginPath();
context.strokeStyle="green";
context.lineWidth="10";
context.moveTo(sx,sy);
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy);
context.stroke();
}
////////////////////////////////////////////////////////////////
function get_xy_over(event) {
//for getting X,Y coordinates on mouseover
try
{
x1 = event.touches[0].pageX;
y1 = event.touches[0].pageY;
}
catch (error)
{
try
{
x1 = event.clientX;
y1 = event.clientY;
}
catch (ex)
{
}
}
try
{
event.preventDefault();
}
catch (e)
{
}
console.log("Xstart="+x1,"Ystart="+y1)
}
////////////////////////////////////////////////////////////////////////
function get_xy_move(event) {
//for getting X,Y coordinates on mousemove
try
{
x2 = event.touches[0].pageX;
y2 = event.touches[0].pageY;
}
catch (error)
{
try
{
x2 = event.clientX;
y2 = event.clientY;
}
catch (e)
{
}
}
try
{
event.preventDefault();
}
catch (e)
{
}
console.log("Xmove="+x2,"Ymove="+y2)
var drag=x2-x1;
magic(drag);//this is the function which helps the line to get dynamic.defined below
}
/////////////////////////////////////////////////////////////////////////////
function magic(a){
var dynamic_sx=0;
var dynamic_sy=0;
var dynamic_cp1x=0;
var dynamic_cp1y=0;
var dynamic_cp2x=(a/5);
var dynamic_cp2y=(dynamic_cp2x/5);
var dynamic_endx=0+(a/5);
var dynamic_endy=(dynamic_endx/5);
console.log("look="+a);
sx=250+dynamic_sx;
sy=450+dynamic_sy;
cp1x=250+dynamic_cp1x;
cp1y=400+dynamic_cp1y;
cp2x=250+dynamic_cp2x;
cp2y=300+dynamic_cp2y;
endx=250+dynamic_endx;
endy=50+dynamic_endy;
}