主页
JavaScript
HTML Canvas
tryai_canvas_line
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; canvas.height = canvas.width; ctx.transform(1, 0, 0, -1, 0, canvas.height) let xMax = canvas.height; let slope = 1.2; let intercept = 70; ctx.moveTo(0, intercept); ctx.lineTo(xMax, f(xMax)); ctx.strokeStyle = "black"; ctx.stroke(); function f(x) { return x * slope + intercept; } </script> </body> </html>