html5画布javascript使用滑块绘制线
当我移动滑块时，我正在绘制一条圆弧。我让它充满活力。如果我改变弧的点，那么画的线也会改变。我想用一条线做同样的事情。如果我移动滑块，线应该被画出来。另外，我想使它成为动态的，这意味着如果我改变直线点，直线也应该改变html5画布javascript使用滑块绘制线,javascript,html5-canvas,Javascript,Html5 Canvas,当我移动滑块时，我正在绘制一条圆弧。我让它充满活力。如果我改变弧的点，那么画的线也会改变。我想用一条线做同样的事情。如果我移动滑块，线应该被画出来。另外，我想使它成为动态的，这意味着如果我改变直线点，直线也应该改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CH5EX10: Moving In A S
<!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">
drawSlopeCurve2('canvasTwo', 16, 170, 200, 80)
function counterSliderNew(sID, maxValue) {
var slideVal = document.getElementById(sID).value;
//alert(slideVal);
if (maxValue == 100) {
slideVal = slideVal / 100;
}
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);
staticGraph5('canvasTwo');
} else if (slideVal > 67 && slideVal <= 100) {
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
}
}
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 drawSlopeCurve2(canId, mvx, mvy, lnx, lny) {
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(mvx, mvy);
context.lineTo(lnx, lny);
context.lineWidth = 0.6;
context.stroke();
}
</script>
</html>
CH5EX10：在简单的几何螺旋中移动
.包装纸{
保证金：0自动；
宽度：1000px；
}
左上角{
浮动：左；
宽度：1000px；
位置：相对位置；
利润率：0.500px 10px；
}
D.左{
浮动：左；
宽度：1000px；
}
.清楚{
明确：两者皆有；
}
您的浏览器不支持HTML5画布。
您的浏览器不支持HTML5画布。
drawSlopeCurve2（'canvasTwo'，16，170，200，80）
函数计数器新（sID，maxValue）{
var slideVal=document.getElementById（sID）.value；
//警报（slideVal）；
如果（最大值==100）{
slideVal=slideVal/100；
}
如果（slideVal==0）{
}否则，如果（slideVal>0&&slideVal 34&&slideVal 67&&slideVal您可以使用此函数获取在任意两个点之间插入直线的点阵列：
function linePoints(x1, y1, x2, y2, frames) {
var dx = x2 - x1;
var dy = y2 - y1;
var length = Math.sqrt(dx * dx + dy * dy);
var incrementX = dx / frames;
var incrementY = dy / frames;
var a = new Array();
a.push({ x: x1, y: y1 });
for (var frame = 0; frame < frames - 1; frame++) {
a.push({
x: x1 + (incrementX * frame),
y: y1 + (incrementY * frame)
});
}
a.push({ x: x2, y: y2 });
return (a);
}
功能线点（x1、y1、x2、y2、帧）{
var dx=x2-x1；
var dy=y2-y1；
变量长度=数学sqrt（dx*dx+dy*dy）；
var incrementX=dx/帧；
var incrementY=dy/帧；
var a=新数组（）；
a、 推力（{x:x1，y:y1}）；
对于（var frame=0；frame
下面是代码和小提琴：
CH5EX10：在简单的几何螺旋中移动
.包装纸{
宽度：700px；
高度：350px；
边框：2倍纯绿；
填充：15px；
}
左上角{
显示：内联；
左边距：30px；
}
帆布{
边框：1px纯红；
}
#滑片机{
显示：内联块；
位置：相对位置；
宽度：37像素；高度：300像素；
边框：1px纯蓝色；
}
#金额{
位置：绝对位置；
左侧：5px；顶部：5px；
边缘底部：15px；
宽度：23px；
边框：0；颜色：#f6931f；
字体大小：粗体；
}
#滑块垂直{
位置：绝对位置；
左：10px；上：40px；
宽度：15px；高度：225px；
边框：0px；颜色：#f6931f；
字体大小：粗体；
}
您的浏览器不支持HTML5画布。
您的浏览器不支持HTML5画布。
var起始值=20；
//处理用户移动滑块的操作
$（“#滑块垂直”）。滑块({
方向：“垂直”，
射程：“分钟”，
分:0,，
最高：100，
值：开始值，
幻灯片：功能（事件、用户界面）{
美元（“#金额”）.val（ui.value）；
counterSliderNew（'slide1'，'100'，用户界面值）；
}
});
//在直线的起点和终点之间获取100个点的数组
var点=线点（16、170、200、80100）；
//基于起始滑块值绘制初始点
计数器滑动新值（'slide1'，'100'，起始值）；
函数counterSliderNew（sID、maxValue、SliderValue）{
var slideVal=theSliderValue；//document.getElementById（sID）.value；
//获取滑块值并获取点处的点[slideVal]
var点=点[slideVal]；
擦除（'canvasTwo'）；
drawSlopeCurve2（'canvasTwo'，16170，x点，y点）；
如果（最大值==100）{
slideVal=slideVal/100；
}
如果（slideVal==0）{
}否则，如果（slideVal>0&&slideVal 34&&slideVal 67&&slideVal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX10: Moving In A Simple Geometric Spiral </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.wrapper {
width: 700px;
height:350px;
border:2px solid green;
padding:15px;
}
.uppleft{
display: inline;
margin-left: 30px;
}
canvas{
border:1px solid red;
}
#sliderwrapper{
display: inline-block;
position:relative;
width:37px; height:300px;
border:1px solid blue;
}
#amount{
position:absolute;
left:5px; top:5px;
margin-bottom:15px;
width:23px;
border:0; color:#f6931f;
font-weight:bold;
}
#slider-vertical{
position:absolute;
left:10px; top:40px;
width:15px; height:225px;
border:0px; color:#f6931f;
font-weight:bold;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="sliderwrapper">
<input type="text" id="amount" />
<div id="slider-vertical"></div>
</div>
<div class="uppleft">
<canvas id="canvasOne" width="300" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
<canvas id="canvasTwo" width="300" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</div>
</body>
<script type="text/javascript">
var startingValue=20;
// handles user moving the slider
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: startingValue,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
counterSliderNew('slide1', '100', ui.value);
}
});
// get an array of 100 points between start and end of line
var points=linePoints(16, 170, 200, 80,100);
// draw the initial point based on the beginning slider value
counterSliderNew('slide1', '100', startingValue);
function counterSliderNew(sID, maxValue,theSliderValue) {
var slideVal = theSliderValue; // document.getElementById(sID).value;
// get the slider value and get the point at points[slideVal]
var point=points[slideVal];
erase('canvasTwo');
drawSlopeCurve2('canvasTwo',16,170,point.x,point.y);
if (maxValue == 100) {
slideVal = slideVal / 100;
}
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);
staticGraph5('canvasTwo');
} else if (slideVal > 67 && slideVal <= 100) {
erase('canvasOne');
drawBezier2('canvasOne', new Array({
x : 18.8,
y : 75
}, {
x : 28,
y : 160
}, {
x : 228,
y : 165
}), slideVal);
}
}
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 drawSlopeCurve2(canId, mvx, mvy, lnx, lny) {
var canvas = document.getElementById(canId);
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(mvx, mvy);
context.lineTo(lnx, lny);
context.lineWidth = 0.6;
context.stroke();
}
function linePoints(x1, y1, x2, y2, frames) {
var dx = x2 - x1;
var dy = y2 - y1;
var length = Math.sqrt(dx * dx + dy * dy);
var incrementX = dx / frames;
var incrementY = dy / frames;
var a = new Array();
a.push({ x: x1, y: y1 });
for (var frame = 0; frame < frames - 1; frame++) {
a.push({
x: x1 + (incrementX * frame),
y: y1 + (incrementY * frame)
});
}
a.push({ x: x2, y: y2 });
return (a);
}
</script>
</html>