Javascript 在滑块的移动上画一条线
我在滑块运动上画了一个圆弧。如果移动滑块，将绘制圆弧。在画布id为canvasTwo的圆弧周围，我画了一条线。我试图在滑块的运动上画出这条线。所以当滑块移动时，将绘制一条直线。目前仅在arc中发生。任何帮助。请Javascript 在滑块的移动上画一条线,javascript,html5-canvas,Javascript,Html5 Canvas,我在滑块运动上画了一个圆弧。如果移动滑块，将绘制圆弧。在画布id为canvasTwo的圆弧周围，我画了一条线。我试图在滑块的运动上画出这条线。所以当滑块移动时，将绘制一条直线。目前仅在arc中发生。任何帮助。请 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&g
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX10: Moving In A Simple Geometric Spiral </title>
<style>
.wrapper {
margin: 0 auto;
width: 1000px;
}
.uppleft {
float: left;
width: 1000px;
position: relative;
margin: 0 0 500px 10px;
}
.dnleft {
float: left;
width: 1000px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="uppleft">
<canvas id="canvasOne" width="300" height="300"width="500" height="500" style="position:absolute; left:5px; top:10px; border:1px solid red;">
Your browser does not support HTML5 Canvas.
</canvas>
<canvas id="canvasTwo" width="300" height="300" style="position:absolute; left:250px; top:30px; border:1px solid red;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div class="clear"></div>
<div class="dnleft">
<input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSliderNew('slide1', '100');" />
</div>
</div>
</body>
<script type="text/javascript">
drawSlopeCurve1('canvasTwo')
function counterSliderNew(sID, maxValue) {
var slideVal = document.getElementById(sID).value;
//alert(slideVal);
if (maxValue == 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
};
if (slideVal == 0) {
} else if (slideVal > 0 && slideVal <= 34) {
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
} else if (slideVal > 34 && slideVal <= 67) {
//alert(slideVal);
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
} else if (slideVal > 67 && slideVal <= 100) {
erase('canvasOne');
drawBezier4('canvasOne', new Array({
x : 16,
y : 170
}, {
x : 160,
y : 72
}), slideVal);
//drawBezier3('canvasTwo', startPt, controlPt, endPt, position);
}
}
function drawBezier2(canId, points, slideVal) {
var canvas = document.getElementById(canId);
var context = canvas.getContext("2d");
// Draw guides
context.lineWidth = 2;
context.strokeStyle = "rgb(113, 113, 213)";
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 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;
}
function drawSlopeCurve1(canId) {
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(16, 170);
context.lineTo(160, 72);
context.lineWidth = 0.6;
context.stroke();
}
</script>
</html>
CH5EX10：在简单的几何螺旋中移动
.包装纸{
保证金：0自动；
宽度：1000px；
}
左上角{
浮动：左；
宽度：1000px；
位置：相对位置；
利润率：0.500px 10px；
}
D.左{
浮动：左；
宽度：1000px；
}
.清楚{
明确：两者皆有；
}
您的浏览器不支持HTML5画布。
您的浏览器不支持HTML5画布。
drawSlopeCurve1（“canvasTwo”）
函数计数器新（sID，maxValue）{
var slideVal=document.getElementById（sID）.value；
//警报（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
};
如果（slideVal==0）{
}否则，如果（slideVal>0&&slideVal 34&&slideVal 67&&slideVal更新您的slide1输入，如下所示：
<input id="slide1" type="range" min="0" max="100" step="1" value="0" onchange="counterSliderNew('slide1', '100'); drawSlopeCurve1('slide1',100);" />
function drawSlopeCurve1(sID,maxValue) {
erase('canvasTwo');
var canId = 'canvasTwo';
var slideVal = parseInt(document.getElementById(sID).value);
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
//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();
}
（您可以为线端点x1、y1和x2、y2输入任何想要的值）
您没有在滑块移动上调用drawSlopeCurve1
函数。非常感谢您的回答。您能告诉我直线增量的公式吗？我还需要用不同的点再画一条直线，这一次是context.moveTo（16，170）；context.lineTo（200，80）；我更新了上面的代码（输入线和drawSlopeCurve1函数）。现在，您可以输入所需的线端点。起点是x1，y1，终点是x2，y2。要了解这里发生了什么，请研究“线的斜率y=mx+b”和“两点之间的距离”。代码中可能难以理解的一个棘手部分是“距离/最大值*slideVal"。这是在每次滑块更改时增加新x值的距离量。我还更新了JSFIDLE live示例。希望这有帮助！大家好，知道如何在滑块移动时绘制贝塞尔曲线吗？我设法获得了二次曲线的代码，但无法获得贝塞尔曲线的任何代码。此外，我正在尝试在曲线上移动一个对象画画，谢谢