用canvas画布画一个二次函数

今天是高考第二天了，看了一会昨天高考数学卷，刚好又在学习canvas这部分内容，所以突发奇想的或一个二次曲线图。

首先，我们需要创建一个400*800的画布并让其居中显示

<canvas id="drawing" width="400" height="800" style="margin:100px auto;display: block;"></canvas>

第二步，我们创建一个getContext对象

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

var drawing=document.getElementById("drawing");
var context=drawing.getContext("2d");

第三步，我们需要建立坐标系，需要用到canvas路径的 moveTo 和 lineTo 方法

定义和用法

beginPath() 方法开始一条路径，或重置当前的路径。

提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。

moveTo() 方法把路径移动到画布中的指定点，不创建线条。

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

方法使用详情请参考：https://www.runoob.com/tags/canvas-beginpath.html

context.beginPath();
//绘制xy轴
xy(400,800,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);
        }

得到的图像如下

这里使用了 canvas 的文本绘制方法 fillText()

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

详细使用请参考： https://www.runoob.com/tags/canvas-filltext.html

第四步，坐标系已经有了，这是我们就可以描点了，但是在这步之前我们先要同步一下坐标系， canvas 画布的坐标原点是位于画布的左上，而坐标系的原点却位于中间，也就是画布坐标（200,400），并且还需要调和一下 x ，y 轴的比例，为了充分利用坐标系，我们把 x , y 轴都缩小100倍，故而坐标轴的（x , y）在画布中的位置就变成（100 * x + 200 ,400 - y）了。

第五步，经过计算我们已经将坐标系与画布坐标进行了转化，现在就可以进行描点了

    function power(context){
       	var x=-2;
       	  //起始描绘点
       context.moveTo(100*x+200,400-100*x*x);
        //下一个描绘点
       for(var i=1;i<=400;i++){
       	 x=x+i/100;
         context.lineTo(100*x+200,400-100*x*x);
       }

第六步，我们添加函数的文字描述

  //y=x^2
        context.font="bold 28px Arial";
        context.fillText("y=x",110,200);
        context.font="bold 14px Arial";
        context.fillText("2",135,185);

最后我们只需将所有描点连接起来就完成了

 //连线
context.stroke();

最后效果如下：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数绘制</title>
</head>
<body>
	<canvas id="drawing" width="400" height="800" style="margin:100px auto;display: block;"></canvas>
	<script type="text/javascript">
		var drawing=document.getElementById("drawing");
		var context=drawing.getContext("2d");
		// context.strokeRect(0,0,400,400);
		
		context.beginPath();
		//绘制xy轴
        xy(400,800,10,context);
        //描点
        power(context);
        //y=x^2
        context.font="bold 28px Arial";
        context.fillText("y=x",110,200);
        context.font="bold 14px Arial";
        context.fillText("2",135,185);
        //连线
		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);
        }
        function power(context){
       	var x=-2;
       	  //起始描绘点
       context.moveTo(100*x+200,400-100*x*x);
        //下一个描绘点
       for(var i=1;i<=400;i++){
       	 x=x+i/100;
         context.lineTo(100*x+200,400-100*x*x);
       }
       }
 	
	</script>
</body>
</html>

用canvas画布画一个二次函数

定义和用法

猜你喜欢