用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>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值