1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Faire varier une droite</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- curseur -->
<form action="input-type-range-min-max.php" method="post">
<input type="range" id="champ1" name="range" value="50" min="-100" max="110" step="5" />
<p>Pente</p>
<input type="range" id="champ2" name="range2" value="0" min="-20" max="20" step="1" />
<p>Décalage parallèle</p>
<input type="range" id="champ3" name="range3" value="35" min="35" max="85" step="2" />
<p>Temp maxi</p>
</form>
<style type="text/css">.canvasgroupe {
position: relative; /* pour servir de référent */
}
#canvasfond {
position: absolute;
top: 0;
left: 0;
}
#canvasfondM {
position: absolute;
top: 0;
left: 0;
}
#canvascourbe1 {
position: absolute;
}
#canvascourbe2 {
position: absolute;
.color-hint {
background: linear-gradient(#f20000, 50%, #f29400);
}
}
</style>
<section class="canvasgroupe">
<canvas id="canvasfond" width="1000" height="400"></canvas>
<canvas id="canvasfondM" width="1000" height="400"></canvas>
<canvas id="canvascourbe1" width="1000" height="400"></canvas>
<canvas id="canvascourbe2" width="1000" height="400"></canvas>
</section>
<script type="text/javascript">
'use strict';
// Constantes
const x1 = 300;
const x2 = 798;
const maxx1 = 300;
const maxx2 = 798;
// variables locales
var a1 = 0;
var y1 = 200;
var y2 = 35;
var maxy1 = 35;
var maxy2 = 35;
function rectangle(context) {
var canvas = document.getElementById("canvasfond");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle="blue";
context.lineWidth="2";
context.rect(299,0,500,300);
context.fillStyle="yellow";
context.fill();
context.stroke();
}
function rectmaxi(maxy2, context) {
var canvasfondM = context.canvas;
context.clearRect(299,0,500, canvasfondM.height);
context.beginPath();
context.rect(299,0,500,maxy2);
context.fillStyle="rgba(60,179,113,0.5)";
opacity: 0.5;
context.fill();
}
function drawLine1(y1, y2, context) {
var canvascourbe1 = context.canvas;
context.clearRect(0, 0, canvascourbe1.width, canvascourbe1.height);
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
}
function drawLine2(maxy1, maxy2, context) {
var canvascourbe2 = context.canvas;
context.clearRect(0, 0, canvascourbe2.width, canvascourbe2.height);
context.beginPath();
context.moveTo(maxx1, maxy1);
context.lineTo(maxx2, maxy2);
context.stroke();
}
// Fonction appelée au chargement de la page
$(function () {
var canvasCourbe1 = document.getElementById('canvascourbe1');
var contextCourbe1 = canvasCourbe1.getContext('2d');
var canvasCourbe2 = document.getElementById('canvascourbe2');
var contextCourbe2 = canvasCourbe2.getContext('2d');
var canvasFond = document.getElementById('canvasfond');
var contextFond = canvasFond.getContext('2d');
var canvasFondM = document.getElementById('canvasfondM');
var contextFondM = canvasFondM.getContext('2d');
// initialisation des contextes : strokeStyle, lineWidth, etc.
contextFondM.strokeStyle = 'blue';
contextFondM.lineWidth = '2';
contextCourbe1.strokeStyle = 'red';
contextCourbe1.lineCap = 'round';
contextCourbe1.lineWidth = '4';
contextCourbe2.strokeStyle = 'green';
contextCourbe2.setLineDash([5, 15]);
contextCourbe2.lineCap = 'round';
contextCourbe2.lineWidth = '5';
$('#champ1').after('<output class="y2"></output>');
$('#champ1').on('input', function () {
y2 = $(this).val(); // on omet var ici
$('output.y2').text(y2);
drawLine1(y1, y2, contextCourbe1);
});
$('#champ2').after('<output class="a1"></output>');
$('#champ2').on('input', function () {
a1 = $(this).val(); // on omet var ici
$('output.a1').text(a1);
drawLine1(y1-a1, y2-a1, contextCourbe1);
});
$('#champ3').after('<output class="maxy2"></output>');
$('#champ3').on('input', function () {
maxy2 = maxy1 = $(this).val(); // on omet var ici
$('output.maxy2').text(maxy2);
drawLine2(maxy1, maxy2, contextCourbe2);
rectmaxi(maxy2, contextFondM);
});
// premier appel
rectangle(contextFond);
drawLine1(y1, y2, contextCourbe1);
drawLine2(maxy1, maxy2, contextCourbe2);
rectmaxi(maxy2, contextFondM);
});
</script>
</body>
</html> |
Partager