在html中绘制一元一次，一元二次，一元三次函数

最新推荐文章于 2022-10-29 16:14:53 发布

一头小驴

最新推荐文章于 2022-10-29 16:14:53 发布

阅读量813

点赞数

本文链接：https://blog.csdn.net/qq_37326058/article/details/104031332

版权

这篇博客适合入门者，介绍了如何利用html画布和JavaScript来绘制一元一次、一元二次和一元三次函数，通过掌握缩放比例，可以实现函数图形随参数变化的动态效果。

摘要由CSDN通过智能技术生成

入门级别，大神绕过。
html画布和js提供的一些绘制函数，可以轻松的帮助我们绘制函数。只要掌握好缩放比例。如果再把滚动条和对应的参数绑定，大概就可以实现函数图随参数改变而改变的效果吧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="drawing" width="1600" height="3200" style="margin:100px auto;display: block;"></canvas>
	<script>
		var drawing=document.getElementById("drawing");
		var context=drawing.getContext("2d");
		// 绘制直线
		// context.beginPath(); 
  //       context.lineWidth="5";
  //       context.strokeStyle="green"; // Green path
  //       context.moveTo(0,75);
  //       context.lineTo(250,75);
  //       context.lineTo(250,175);
  //       context.stroke();
        
  //       context.beginPath();
  //       context.strokeStyle="purple"; // Purple path
  //       context.moveTo(50,0);
  //       context.lineTo(150,130); 
  //       context.stroke(); // Draw it

       context.beginPath();
       //绘制xy轴
       xy(800,3200,10,context);
       context.stroke();
       function xy(x,y,s,context){
    
        	// 绘制X轴
			context.moveTo<

最低0.47元/天解锁文章

一头小驴

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在html中绘制一元一次，一元二次，一元三次函数

入门级别，大神绕过。html画布和js提供的一些绘制函数，可以轻松的帮助我们绘制函数。只要掌握好缩放比例和响应位置关系。如果再把滚动条和对应的参数绑定，大概就可以实现函数图随参数改变而改变的效果吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫