在html中绘制一元一次，一元二次，一元三次函数
入门级别，大神绕过。
html画布和js提供的一些绘制函数，可以轻松的帮助我们绘制函数。只要掌握好缩放比例。如果再把滚动条和对应的参数绑定，大概就可以实现函数图随参数改变而改变的效果吧。
<html lang="en">
<head><meta charset="UTF-8"><title>Documenttitle>
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 itcontext.beginPath();//绘制xy轴xy(800,3200,10,context);context.stroke();function xy(x,y,s,context){// 绘制X轴context.moveTo(0,y/2);context.lineTo(x,y/2);context.lineTo(x-s,y/2-s);context.moveTo(x,y/2);context.lineTo(x-s,y/2+s);//绘制Y轴context.moveTo(x/2,y);context.lineTo(x/2,0);context.lineTo(x/2+s,s);context.moveTo(x/2,0);context.lineTo(x/2-s,s);//标注XY轴context.font="bold 20px Arial";context.textAlign="center";context.textBaseline="midden";context.fillText("x",x-s,y/2+3*s);context.fillText("y",x/2+2*s,2*s);}// 绘制y=x^2 考虑到平方太大，其实我们将图像相对于坐标轴缩小了100倍quadraticFunction(context);function quadraticFunction(context){var x = -4;//起始描绘点context.moveTo(100*x+400,1600-100*x*x);//下一个描绘点for (var i = 1; i <=800; i++) {x=x+1/100;context.lineTo(100*x+400,1600-100*x*x);}context.font="bold 28px Arial";context.fillText("y=x^2",100*4+400,1600-100*4*4+80);context.stroke();}//绘制a(t)=x0+m*tvar x0Var =0;var mVar = 1;var fraction1 = 1;var fraction2 = 1/6;function simpleFunction(context){var x = -4;context.moveTo(100*x+400,1600-(x0Var+mVar*100*x));for (var i = 1; i <=800; i++) {x=x+1/100;context.lineTo(100*x+400,1600-(x0Var+mVar*100*x));}context.font="bold 28px Arial";context.fillText("a(t)=x0+m*t",100*4+400,1600-(x0Var+mVar*100*4));context.stroke();}simpleFunction(context);//绘制v(t) = 1/2*m*t*t+x0*tfunction quadraticFunctionExtention(context){var x = -4;context.moveTo(100*x+400,1600-100*(1/2*mVar*x*x+x0Var*x));for (var i = 1; i <=800; i++) {x=x+1/100;context.lineTo(100*x+400,1600-100*(1/2*mVar*x*x+x0Var*x));}context.font="bold 28px Arial";context.fillText("v(t) = 1/2*m*t^2+x0*t",100*4+400,1600-100*(1/2*mVar*4*4+x0Var*4)+120);context.stroke();}quadraticFunctionExtention(context);//绘制s(t) = 1/6*m*t*t*t+1/2*x0*t*tfunction CubicFunction(context){var x = -4;context.moveTo(100*x+400,1600-(100*100*1/6*mVar*x*x*x+100*1/2*x0Var*x*x));for (var i = 1; i <=800; i++) {x=x+1/100;context.lineTo(100*x+400,1600-(100*100*1/6*mVar*x*x*x+100*1/2*x0Var*x*x));}context.font="bold 28px Arial";context.fillText("s(t) = 1/6*m*t^3+1/2*x0*t^2",400,100);context.stroke();}CubicFunction(context);script>body>
html>
参照自：https://blog.csdn.net/djz917/article/details/80623245
https://blog.csdn.net/djz917/article/details/80623245
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！