Bonjour
Je trace un trait avec canvas JavaScript.
HTML
<!DOCTYPE html> <html> <head> <title></title>
<meta charset='utf-8'> <link rel='stylesheet' href='bot.css'>
<script src='graph.js?fx=20&fy=500&tx=400&ty=700' async></script>
<style> #diagram{ background-color: #EEE; width:800px;height:600px; } </style>
</head>
<body>
<canvas id='diagram'></canvas>
</body>
</html>
JS
const urlParams = new URLSearchParams(window.location.search);
const fx = urlParams.get('fx') ;
const fy = urlParams.get('fy') ;
const tx = urlParams.get('tx') ;
const ty = urlParams.get('ty') ;
let canvas = document.getElementById('diagram');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(fx, fy);
ctx.lineTo(400, 700);
ctx.strokeStyle= '#4488EE';
//Nuance de bleu
ctx.lineWidth= 3;
ctx.stroke();
Ça marche.
Mais si je veux utiliser aussi les paramètres tx et ty, là j'ai systématiquement un trait horizontal quelques soient leurs valeurs.
const urlParams = new URLSearchParams(window.location.search);
const fx = urlParams.get('fx') ;
const fy = urlParams.get('fy') ;
const tx = urlParams.get('tx') ;
const ty = urlParams.get('ty') ;
let canvas = document.getElementById('diagram');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(fx, fy);
ctx.lineTo(tx, ty);
ctx.strokeStyle= '#4488EE';
ctx.lineWidth= 3;
ctx.stroke();
Quel est le problème ?
