Javascript html5画布在给定点上移动对象
我想在斜线上移动一个物体。我已经给出了我的代码。在我第三个div的代码中，当我移动滑块时，我在这条线上画了一条斜线，我想移动一个对象。类似的事情，我正在做我的第一个div。我在曲线上移动一个对象。我正在寻找一些函数，在其中我将提供点，对象将遵循这些点。这是我的密码。这段代码只适用于chrome浏览器，因为我正试图让它只适用于safari和chrome浏览器Javascript html5画布在给定点上移动对象,javascript,html5-canvas,Javascript,Html5 Canvas,我想在斜线上移动一个物体。我已经给出了我的代码。在我第三个div的代码中，当我移动滑块时，我在这条线上画了一条斜线，我想移动一个对象。类似的事情，我正在做我的第一个div。我在曲线上移动一个对象。我正在寻找一些函数，在其中我将提供点，对象将遵循这些点。这是我的密码。这段代码只适用于chrome浏览器，因为我正试图让它只适用于safari和chrome浏览器 <!DOCTYPE HTML> <html> <
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.wrapper {
margin: 0 auto;
width: 1000px;
}
.canHdr {
float: left;
width: 450px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<form>
<!-- wrapper -->
<div class="wrapper">
<!-- canHdr -->
<div id="canHdr" class="canHdr" >
<p>
This is my 1st div with bezier curve the curve is getting drawn as slider moves and also a ball in moving on that .
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas1" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider1" class="newBg">
<input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide1');" />
</div>
</div>
<!--/ canHdr -->
<!-- canHdr2 -->
<div id="canHdr2" class="canHdr" >
<p>
This is my 2nd div
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas2" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider2" class="newBg">
<input id="slide2" type="range" min="0" max="100" step="1" value="0" onchange="counterSlider('slide2');" />
</div>
</div>
<!-- canHdr2 -->
<!-- canHdr3 -->
<div id="canHdr3" class="canHdr" >
<p>
This is my 3rd div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas3" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider3" class="newBg">
<input id="slide3" type="range" min="0" max="100" step="1" value="0" onchange=" drawSlopeCurve2('slide3','100'); " />
</div>
</div>
<!--/ canHdr3 -->
<!-- canHdr4 -->
<div id="canHdr4" class="canHdr" >
<p>
This is my 4th div with slanting line. I want to move a ball on this line when I move the slider. So as the line increases ball will also move on the line.
</p>
<div class="canOuterHdr" >
<canvas id="myCanvas4" width="300" height="195" style="position: relative;">
[No canvas support]
</canvas>
</div>
<div id="slider4" class="newBg">
<input id="slide4" type="range" min="0" max="100" step="1" value="0" onchange=" drawSlopeCurve1('slide4','100'); " />
</div>
</div>
<!--/ canHdr4 -->
</div>
<!-- /wrapper -->
<script type="text/javascript">
function counterSlider(sID) {
var slideVal = document.getElementById(sID).value;
/*if (maxValue ==100){
slideVal=slideVal/100;
}*/
slideVal = slideVal / 100;
var position = slideVal;
var startPt = {
x : 18.8,
y : 45
};
var controlPt = {
x : 28,
y : 160
};
var endPt = {
x : 228,
y : 165
};
var startPt2 = {
x : 20,
y : 75
};
var controlPt2 = {
x : 28,
y : 160
};
var endPt2 = {
x : 228,
y : 165
};
if (slideVal == 0) {
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
//newSprite('myCanvas1b', 18.8, 45);
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
} else if (slideVal > 0 && slideVal <= 34) {
erase('myCanvas1');
//erase('myCanvas1b');
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
} else if (slideVal > 34 && slideVal <= 67) {
erase('myCanvas1');
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
} else if (slideVal > 67 && slideVal <= 100) {
erase('myCanvas1');
erase('myCanvas2');
erase('myCanvas3');
erase('myCanvas4');
drawBezier2('myCanvas1', new Array({
x : 18.8,
y : 45
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawBezier2('myCanvas2', new Array({
x : 20,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
drawNextPoint('myCanvas1', startPt, controlPt, endPt, position);
drawNextPoint('myCanvas2', startPt2, controlPt2, endPt2, position);
}
}
function erase(canvasId) {
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.beginPath();
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = canvas.width;
}
/**********for backgroundImage********************/
function _getQBezierValue(t, p1, p2, p3) {
var iT = 1 - t;
return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}
function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
return {
x : _getQBezierValue(position, startX, cpX, endX),
y : _getQBezierValue(position, startY, cpY, endY)
};
}
function drawNextPoint(canId, startPt, controlPt, endPt, position) {
var pt = getQuadraticCurvePoint(startPt.x, startPt.y, controlPt.x, controlPt.y, endPt.x, endPt.y, position);
position = (position + 0.006) % 1.0;
var canvas = document.getElementById(canId);
var ctx = canvas.getContext('2d');
//ctx.globalCompositeOperation = 'source-atop';
//ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillStyle = "#0077c1";
ctx.arc(pt.x, pt.y, 6, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function newSprite(canId, mvx, mvy) {
var canvas = document.getElementById(canId);
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'source-atop';
//ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillStyle = "#0077c1";
ctx.arc(mvx, mvy, 6, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function drawBezier2(canId, points, slideVal) {
var canvas = document.getElementById(canId);
var context = canvas.getContext("2d");
//context.globalCompositeOperation = 'source-atop';
//context.strokeStyle = "rgb(113, 113, 213)";
context.strokeStyle = "#000";
context.lineWidth = 0.6;
context.beginPath();
// Label end points
//context.fillStyle = "rgb(0, 0, 0)";
// Draw spline segemnts
context.moveTo(points[0].x, points[0].y);
for (var t = 0; t <= slideVal; t += 0.1) {
context.lineTo(Math.pow(1 - t, 2) * points[0].x + 2 * (1 - t) * t * points[1].x + Math.pow(t, 2) * points[2].x, Math.pow(1 - t, 2) * points[0].y + 2 * (1 - t) * t * points[1].y + Math.pow(t, 2) * points[2].y);
}
// Stroke path
context.stroke();
}
function drawSlopeCurve1(sID, maxValue) {
// erase('canvasTwo');
var canId = 'myCanvas4';
var slideVal = parseInt(document.getElementById(sID).value);
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
canvas.width = canvas.width;
//line end points
x1 = 16;
y1 = 170;
x2 = 200;
y2 = 80;
//get slope (rise over run)
var m = (y2 - y1) / (x2 - x1);
//get y-intercept
var b = y1 - (m * x1);
//get distance between the two points
var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
//get new x and y values
var x = x1 + parseInt(distance / maxValue * slideVal);
var y = parseInt(m * x + b);
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x, y);
context.lineWidth = 0.6;
context.stroke();
}
function drawSlopeCurve2(sID, maxValue) {
// erase('canvasTwo');
var canId = 'myCanvas3';
var slideVal = parseInt(document.getElementById(sID).value);
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
canvas.width = canvas.width;
//line end points
x1 = 16;
y1 = 170;
x2 = 160;
y2 = 72;
//get slope (rise over run)
var m = (y2 - y1) / (x2 - x1);
//get y-intercept
var b = y1 - (m * x1);
//get distance between the two points
var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
//get new x and y values
var x = x1 + parseInt(distance / maxValue * slideVal);
var y = parseInt(m * x + b);
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x, y);
context.lineWidth = 0.6;
context.stroke();
}
</script>
</form>
</body>
</html>
.包装纸{
保证金：0自动；
宽度：1000px；
}
canHdr先生{
浮动：左；
宽度：450px；
高度：400px；
边框：1px纯红；
}
这是我的第一次使用bezier曲线的div，随着滑块的移动，曲线会被绘制出来，还有一个球会在上面移动。
[无画布支持]
这是我的第二部
[无画布支持]
这是我的第三个斜线div。当我移动滑块时，我想在这条线上移动一个球。所以随着线的增加，球也会在线上移动。
[无画布支持]
这是我的第四个斜线。当我移动滑块时，我想在这条线上移动一个球。所以随着线的增加，球也会在线上移动。
[无画布支持]
功能计数器（sID）{
var slideVal=document.getElementById（sID）.value；
/*如果（最大值==100）{
slideVal=slideVal/100；
}*/
slideVal=slideVal/100；
var位置=slideVal；
var startPt={
x:18.8，
y:45
};
var controlPt={
x:28,，
y:160
};
var endPt={
x:228，
y:165
};
var startPt2={
x:20，
y:75
};
var controlPt2={
x:28,，
y:160
};
变量endPt2={
x:228，
y:165
};
如果（slideVal==0）{
擦除（“myCanvas2”）；
擦除（“myCanvas3”）；
擦除（“myCanvas4”）；
//newSprite（'myCanvas1b'，18.8,45）；
drawBezier2（'myCanvas1'，新阵列({
x:18.8，
y:45
}, {
x:28,，
y:160
}, {
x:228，
y:165
})，slideVal）；
drawBezier2（'myCanvas2'，新阵列({
x:20，
y:75
}, {
x:28,，
y:160
}, {
x:228，
y:165
})，slideVal）；
}否则，如果（slideVal>0&&slideVal 34&&slideVal 67&&slideVal）尝试编辑您的源代码，以仅显示基本内容。您可以将完整示例作为提琴。提前感谢。my JSFIDLE链接：请参阅：