用canvans画一个二元一次方程式

最新推荐文章于 2024-02-21 12:02:35 发布

llxhzm

最新推荐文章于 2024-02-21 12:02:35 发布

阅读量531

点赞数

分类专栏： js 文章标签： canvas

本文链接：https://blog.csdn.net/qq_20059455/article/details/106115583

版权

js 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="format-detection" content="telephone=yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>weapp ui</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="400" style="border:1px solid #d3d3d3;background:#ffffff;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');

  // 开始绘制路径 56.25y = (x - 150)^2  宽高 二元一次方程都是写死的 这里只提供一个思路
  ctx.beginPath();
  ctx.moveTo(0, 0);
  for (let i = 0; i <= 300; i++) {
    ctx.lineTo(i, 400 - Math.pow((i - 150), 2)/56.25);
  }
  ctx.stroke();
</script>
</body>
</html>