【高中数学/对数/指数】已知函数f(x)=e^x-ln(x+m),求证m＜=2时，证明f(x)＞0

news2024/12/27 2:54:33

【问题】

已知函数f(x)=e^x-ln(x+m),求证m<=2时，证明f(x)>0 （2013年高考全国卷II理科第21题）

【出处】

《高中数学解题思维策略》P30 例2-11  杨林军编著

【解答】

对于y=e^x,总有e^x>=x+1 (x=0时去等)

对于y=ln(x+m),总有y=x+m-1>=ln(x+m) （x+m=1时取等）

如对于y=ln(x+2)，总有x+1>=ln(x+2)

对于y=ln(x+1),总有x>ln(x+1)

所以，f(x)=e^x-ln(x+m)>(x+1)-(x+m-1)=2-m 不取等号因为切点不会是同一横坐标

故m<=2时，f(x)>0 

证毕。下面将用图线辅助思考。

下图是m取不同值时的f(x)=e^x-ln(x+m)曲线

下面是m=2时三条曲线相比的示意图：

下面是m=1时四条曲线相比的示意图：

【图一代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>UNASSIGNED</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        border:0px solid red;
        width:1200px;height:600px;
     }
     </style>
     </head>

     <body οnlοad="draw();">
        <div class="centerlize">
            <canvas id="myCanvas" width="10px" height="10px" style="border:1px dashed black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码拷贝下来，粘贴到文本编辑器中，另存为.html文件，
* 再用chrome浏览器打开，就能看到动画效果。
******************************************************************/

// 系统常量定义处
const TITLE="图一 f(x)=e^x-ln(x+m) 图线 ";    // 图像标题
const WIDTH=1200;                    // 画布宽度
const HEIGHT=600;                    // 画布高度
const SCALE_UNIT=50;                 // 缩放比例 25对应x∈[-24,24],100对应x∈[-6,6]

// 系统变量定义处
var context=0;                        // 画布环境
var stage;                            // 舞台对象
var timeElapsed=0;                    // 动画运作的的时间
const TIME_END=100000;                // 动画运作的期限

//-------------------------------
// Canvas开始运作，由body_onload调用
//-------------------------------
function draw(){
    document.title=TITLE;

    // 画图前初始化
    var canvas=document.getElementById('myCanvas');    
    canvas.width=WIDTH;
    canvas.height=HEIGHT; 
    context=canvas.getContext('2d');  
    
    // 进行屏幕坐标系到笛卡尔坐标系的变换
    // 处置完成前，原点在左上角，向右为X正向，向下为Y的正向
    // 处置完毕后，原点移动到画布中央，向右为X正向，向上为Y的正向
    context.translate(WIDTH/2,HEIGHT/2);
    context.rotate(Math.PI);
    context.scale(-1,1);

    // 初始化舞台
    stage=new Stage();

    // 开始动画
    animate();
};

//-------------------------------
// 画图
//-------------------------------
function animate(){    
    timeElapsed+=1;// 时间每轮增加1

    stage.update(timeElapsed);
    stage.paintBg(context);
    stage.paint(context);

    if(timeElapsed<TIME_END){        
        window.requestAnimationFrame(animate);
    }
}

//-------------------------------
// 舞台对象定义处
//-------------------------------
function Stage(){
    // 内置对象(非必要勿更改)
    var obj=new Object;

    // 对象下的曲线数组(非必要勿更改)
    obj.curves=[];

    // 塞入曲线1(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x-ln(x+2)",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x)-Math.log(x+2);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线2(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x-ln(x+1)",
        xEnd:3,
        x:-1,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x)-Math.log(x+1);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线3(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x-ln(x+0)",
        xEnd:3,
        x:0,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x)-Math.log(x+0);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线4(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x-ln(x-1)",
        xEnd:3,
        x:-1,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x)-Math.log(x-1);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线5(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x-ln(x+3)",
        xEnd:3,
        x:-3,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x)-Math.log(x+3);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });
                                
    // 随时间更新位置(非必要勿更改)
    obj.update=function(t){
        for(var i=0;i<this.curves.length;i++){
            var curve=this.curves[i];

            if(curve.x<curve.xEnd){
                curve.x+=0.01;
                curve.setY(curve.x);
            }
        }
    };

    // 画前景
    obj.paint=function(ctx){  
        // 手动标记点
        //paintPoint(ctx,1,0,"a","navy");
        //paintPoint(ctx,0,1,"b","navy");

        // 文字左上角位置(可手动修改设定值)
        const X_START=-230;    // 文字横起点
        const Y_START=150;    // 文字纵起点
        const OFFSET=50;    // 文字间隔
        // 遍历曲线数组(非必要勿更改)
        for(var i=0;i<this.curves.length;i++){
            var curve=this.curves[i];
            var color=getColor(i);

            // 曲线名称
            drawText(ctx,curve.name,X_START,Y_START-i*OFFSET,color,18);
            // 曲线当前点坐标
            drawText(ctx,"当前 X:"+curve.x.toFixed(3)+"  Y:"+curve.y.toFixed(3),X_START,Y_START-20-(i)*OFFSET,color,18);
            
            // 绘制曲线
            if(curve.pts0){
                paintCurve(ctx,color,curve.pts0);
                
                // 绘制曲线分段1的高低点(可选)
                //var mm=findMaxMin(curve.pts0);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts1){
                paintCurve(ctx,color,curve.pts1);
                // 绘制曲线分段2的高低点(可选)
                //var mm=findMaxMin(curve.pts1);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts2){
                paintCurve(ctx,color,curve.pts2);
                // 绘制曲线分段3的高低点(可选)
                //var mm=findMaxMin(curve.pts2);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts3){
                paintCurve(ctx,color,curve.pts3);
                // 绘制曲线分段4的高低点(可选)
                //var mm=findMaxMin(curve.pts3);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts4){
                paintCurve(ctx,color,curve.pts4);
                // 绘制曲线分段4的高低点(可选)
                //var mm=findMaxMin(curve.pts3);
                //markMaxMin(ctx,mm,color);
            }
        }
    };

    // 画背景(非必要不更改)
    obj.paintBg=function(ctx){
        // 清屏
        ctx.clearRect(-600,-300,1200,600);
        ctx.fillStyle="rgb(251,255,253)";
        ctx.fillRect(-600,-300,1200,600);

        // 画X轴
        drawAxisX(ctx,-600,600,50);

        // 画Y轴
        drawAxisY(ctx,-300,300,50);

        // 画网格线
        drawGrid(ctx,-600,-300,50,1200,600,50);
        
        // 左上角标题
        var metrics = ctx.measureText(TITLE);
        var textWidth = metrics.width;
        drawText(ctx,TITLE,-WIDTH/2+textWidth+3,HEIGHT/2-30,"grey",18);

        // 右下角作者，日期
        const waterMarkTxt="逆火原创@"+(new Date()).toLocaleDateString();
        metrics = ctx.measureText(waterMarkTxt);
        textWidth = metrics.width;
        drawText(ctx,waterMarkTxt,WIDTH/2-textWidth,-HEIGHT/2,"lightGrey",16);
    };
    
    return obj;
}

// 描绘并标识一个点
function paintPoint(ctx,x,y,text,color){
    var xReal=x*SCALE_UNIT;
    var yReal=y*SCALE_UNIT;

    ctx.strokeStyle=color;
    ctx.lineWidth=0.5;

    // 划线
    ctx.save();
    ctx.setLineDash([5,5]);
    ctx.beginPath();    
    ctx.moveTo(xReal,0);
    ctx.lineTo(xReal,yReal);
    ctx.lineTo(0,yReal);
    ctx.stroke();
    ctx.restore();

    // 画圈
    ctx.beginPath();
    ctx.arc(xReal,yReal,4,0,Math.PI*2,false);
    ctx.closePath();    
    ctx.stroke();

    // 写文字
    var metrics = ctx.measureText(text);
    var textWidth = metrics.width;
    drawText(ctx,text,xReal+textWidth+2,yReal-5,color,12);
}

// 连点成线画曲线
function paintCurve(ctx,color,cds){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth=1;

    ctx.beginPath();     
    for(var i=0; i<cds.length; i++){
        let y=cds[i].y;
        if(Math.abs(cds[i].y*SCALE_UNIT)<300){
            ctx.lineTo(cds[i].x*SCALE_UNIT,cds[i].y*SCALE_UNIT);
        }
    }     
    ctx.stroke();  
    ctx.restore();
}

// 找到坐标数组的最大最小值
function findMaxMin(cds){
    if(cds.length<1){
        return null;
    }

    var retval={max:-10000,max_x:0,min:10000,min_x:0};

    for(var i=0;i<cds.length;i++){
        var y=cds[i].y;

        if(y>retval.max){
            retval.max=y;
            retval.max_x=cds[i].x;
        }

        if(y<retval.min){
            retval.min=y;
            retval.min_x=cds[i].x;
        }
    } 

    return retval;
}

// 绘出最大最小值
function markMaxMin(ctx,mm,color){
    if(mm==null){
        return;
    }

    // 最大值
    var x=mm.max_x;
    var y=mm.max;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.arc(x*SCALE_UNIT,y*SCALE_UNIT,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.stroke();
    var text="max@x="+x.toFixed(3)+" y="+y.toFixed(3);
    drawText(ctx,text,x*SCALE_UNIT,y*SCALE_UNIT,color,12);

    // 最小值
    var x=mm.min_x;
    var y=mm.min;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.arc(x*SCALE_UNIT,y*SCALE_UNIT,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.stroke();
    var text="min@x="+x.toFixed(3)+" y="+y.toFixed(3);
    drawText(ctx,text,x*SCALE_UNIT,y*SCALE_UNIT,color,12);
}

// 定点画实心圆
function drawSolidCircle(ctx,x,y,r,color){
      ctx.save();
      ctx.beginPath();
      ctx.arc(x,y,r,0,2*Math.PI);
      ctx.fillStyle=color;
      ctx.fill();
      ctx.restore();
}

// 两点之间画线段
function drawLine(ctx,x1,y1,x2,y2,color){
    ctx.save();
    ctx.lineWidth=0.25;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 画横轴
function drawAxisX(ctx,start,end,step){
    const AXISY_COLOR="black";

    ctx.save();
    
    ctx.lineWidth=0.5;
    ctx.strokeStyle=AXISY_COLOR;

    // 画轴
    ctx.beginPath();
    ctx.moveTo(start, 0);
    ctx.lineTo(end, 0);
    ctx.stroke();
    ctx.closePath();

    // 画箭头
    ctx.beginPath();
    ctx.moveTo(end-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10);
    ctx.lineTo(end, 0);
    ctx.lineTo(end-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10);
    ctx.stroke();
    ctx.closePath();
    
    // 画刻度
    var x,y;
    y=5;
    for(x=start;x<end;x+=step){
        if(x==0){
            continue;
        }

        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, y);
        
        ctx.stroke();
        ctx.closePath();

        var text=formatScale(x/SCALE_UNIT);
        drawText(ctx,text,x,y-20,AXISY_COLOR,12);
    }

    ctx.restore();
}

// 画纵轴
function drawAxisY(ctx,start,end,step){
    const AXISY_COLOR="black";
        
    ctx.save();
    
    ctx.lineWidth=0.5;
    ctx.strokeStyle=AXISY_COLOR;

    // 画轴
    ctx.beginPath();
    ctx.moveTo(0, start);
    ctx.lineTo(0, end);
    ctx.stroke();
    ctx.closePath();

    // 画箭头
    ctx.beginPath();
    ctx.moveTo(Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
    ctx.lineTo(0, end);
    ctx.lineTo(-Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
    ctx.stroke();
    ctx.closePath();
    
    // 画刻度
    var x,y;
    x=5;
    for(y=start;y<end;y+=step){
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(0, y);
        
        var text=formatScale(y/SCALE_UNIT);
        var metrics = ctx.measureText(text);
        var textWidth = metrics.width;
        drawText(ctx,text,x-textWidth-5,y,AXISY_COLOR,12);

        ctx.stroke();
        ctx.closePath();
    }

    ctx.restore();
}

//-------------------------------
// 得到整型后的刻度
//-------------------------------
function formatScale(scale){
    var s=scale*10;
    if(s % 5==0){
        return scale+"";
    }else{
        return scale.toFixed(2);
    }
}

// 画网格线
function drawGrid(ctx,x1,y1,step1,x2,y2,step2){
    ctx.save();
    
    ctx.lineWidth=0.25;
    ctx.strokeStyle="lightgrey";    

    // 分十格
    var x,y;
    for(x=x1;x<x2;x+=step1/10){
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.stroke();
        ctx.closePath();
    }

    for(y=y1;y<y2;y+=step2/10){
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.stroke();
        ctx.closePath();
    }

    // 十小格间的分割线
    ctx.lineWidth=0.25;
    ctx.strokeStyle="grey";
    ctx.setLineDash([5,5]);// 设置虚线,起止点间包含五空格五划线共十段

    for(x=x1;x<x2;x+=step1){
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.stroke();
    }

    for(y=y1;y<y2;y+=step2){
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.stroke();
    }

    ctx.restore();
}

//-------------------------------
// 角度得到弧度
//-------------------------------
function getRad(degree){
    return degree/180*Math.PI;
}

//-------------------------------
// 得到颜色
//-------------------------------
function getColor(index){
    var arr=[
        "maroon" /* 栗色 */,
        "orange" /* 橙色 */,
        "blue"   /* 蓝色 */,
        "green"  /* 绿色 */,       
        "fuchsia"/* 紫红 */,        
        "grey"   /* 灰色 */,
        "lime"   /* 酸橙 */,        
        "navy"   /* 海蓝 */,        
        "purple" /* 紫色 */,
        "skyblue"/* 天蓝 */,
        "teal"   /* 蓝绿 */,
        "yellow" /* 亮黄 */,
        "aqua"   /* 湖绿 */,
        "red"    /* 红色 */,        
        "black"  /* 黑色 */,    
    ];

    return arr[index % arr.length];
}

//-------------------------------------
// 绘制文字,指定颜色
// ctx:绘图环境
// text:文字
// x,y:坐标
// color:颜色
// size:字体大小
//-------------------------------------
function drawText(ctx,text,x,y,color,size){
    ctx.save();
    ctx.translate(x,y)
    ctx.rotate(getRad(180))
    ctx.scale(-1,1)

    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.fillStyle=color;
    ctx.font = size+"px consolas";

    ctx.fillText(text,0,0);
    ctx.restore();
}

// JS开立方
function kaiLiFang(x){
    if(x>0){
        return Math.pow(x,1/3);
    }else{
        return -Math.pow(-x,1/3);
    }
}
//-->
/****************************************
遇到事情，要学会沉住气，在默默无闻中积攒
力量，等待厚积薄发的一天。
****************************************/
</script>

【图二代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>UNASSIGNED</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        border:0px solid red;
        width:1200px;height:600px;
     }
     </style>
     </head>

     <body οnlοad="draw();">
        <div class="centerlize">
            <canvas id="myCanvas" width="10px" height="10px" style="border:1px dashed black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码拷贝下来，粘贴到文本编辑器中，另存为.html文件，
* 再用chrome浏览器打开，就能看到动画效果。
******************************************************************/

// 系统常量定义处
const TITLE="图二 f(x)=e^x-ln(x+2) 图线 ";    // 图像标题
const WIDTH=1200;                    // 画布宽度
const HEIGHT=600;                    // 画布高度
const SCALE_UNIT=50;                 // 缩放比例 25对应x∈[-24,24],100对应x∈[-6,6]

// 系统变量定义处
var context=0;                        // 画布环境
var stage;                            // 舞台对象
var timeElapsed=0;                    // 动画运作的的时间
const TIME_END=100000;                // 动画运作的期限

//-------------------------------
// Canvas开始运作，由body_onload调用
//-------------------------------
function draw(){
    document.title=TITLE;

    // 画图前初始化
    var canvas=document.getElementById('myCanvas');    
    canvas.width=WIDTH;
    canvas.height=HEIGHT; 
    context=canvas.getContext('2d');  
    
    // 进行屏幕坐标系到笛卡尔坐标系的变换
    // 处置完成前，原点在左上角，向右为X正向，向下为Y的正向
    // 处置完毕后，原点移动到画布中央，向右为X正向，向上为Y的正向
    context.translate(WIDTH/2,HEIGHT/2);
    context.rotate(Math.PI);
    context.scale(-1,1);

    // 初始化舞台
    stage=new Stage();

    // 开始动画
    animate();
};

//-------------------------------
// 画图
//-------------------------------
function animate(){    
    timeElapsed+=1;// 时间每轮增加1

    stage.update(timeElapsed);
    stage.paintBg(context);
    stage.paint(context);

    if(timeElapsed<TIME_END){        
        window.requestAnimationFrame(animate);
    }
}

//-------------------------------
// 舞台对象定义处
//-------------------------------
function Stage(){
    // 内置对象(非必要勿更改)
    var obj=new Object;

    // 对象下的曲线数组(非必要勿更改)
    obj.curves=[];

    // 塞入曲线1(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x-ln(x+2)",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x)-Math.log(x+2);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线2(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线3(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=x+1",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=x+1;// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线4(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=ln(x+2)",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=Math.log(x+2);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });
                                
    // 随时间更新位置(非必要勿更改)
    obj.update=function(t){
        for(var i=0;i<this.curves.length;i++){
            var curve=this.curves[i];

            if(curve.x<curve.xEnd){
                curve.x+=0.01;
                curve.setY(curve.x);
            }
        }
    };

    // 画前景
    obj.paint=function(ctx){  
        // 手动标记点
        //paintPoint(ctx,1,0,"a","navy");
        //paintPoint(ctx,0,1,"b","navy");

        // 文字左上角位置(可手动修改设定值)
        const X_START=-230;    // 文字横起点
        const Y_START=150;    // 文字纵起点
        const OFFSET=50;    // 文字间隔
        // 遍历曲线数组(非必要勿更改)
        for(var i=0;i<this.curves.length;i++){
            var curve=this.curves[i];
            var color=getColor(i);

            // 曲线名称
            drawText(ctx,curve.name,X_START,Y_START-i*OFFSET,color,18);
            // 曲线当前点坐标
            drawText(ctx,"当前 X:"+curve.x.toFixed(3)+"  Y:"+curve.y.toFixed(3),X_START,Y_START-20-(i)*OFFSET,color,18);
            
            // 绘制曲线
            if(curve.pts0){
                paintCurve(ctx,color,curve.pts0);
                
                // 绘制曲线分段1的高低点(可选)
                //var mm=findMaxMin(curve.pts0);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts1){
                paintCurve(ctx,color,curve.pts1);
                // 绘制曲线分段2的高低点(可选)
                //var mm=findMaxMin(curve.pts1);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts2){
                paintCurve(ctx,color,curve.pts2);
                // 绘制曲线分段3的高低点(可选)
                //var mm=findMaxMin(curve.pts2);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts3){
                paintCurve(ctx,color,curve.pts3);
                // 绘制曲线分段4的高低点(可选)
                //var mm=findMaxMin(curve.pts3);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts4){
                paintCurve(ctx,color,curve.pts4);
                // 绘制曲线分段4的高低点(可选)
                //var mm=findMaxMin(curve.pts3);
                //markMaxMin(ctx,mm,color);
            }
        }
    };

    // 画背景(非必要不更改)
    obj.paintBg=function(ctx){
        // 清屏
        ctx.clearRect(-600,-300,1200,600);
        ctx.fillStyle="rgb(251,255,253)";
        ctx.fillRect(-600,-300,1200,600);

        // 画X轴
        drawAxisX(ctx,-600,600,50);

        // 画Y轴
        drawAxisY(ctx,-300,300,50);

        // 画网格线
        drawGrid(ctx,-600,-300,50,1200,600,50);
        
        // 左上角标题
        var metrics = ctx.measureText(TITLE);
        var textWidth = metrics.width;
        drawText(ctx,TITLE,-WIDTH/2+textWidth+3,HEIGHT/2-30,"grey",18);

        // 右下角作者，日期
        const waterMarkTxt="逆火原创@"+(new Date()).toLocaleDateString();
        metrics = ctx.measureText(waterMarkTxt);
        textWidth = metrics.width;
        drawText(ctx,waterMarkTxt,WIDTH/2-textWidth,-HEIGHT/2,"lightGrey",16);
    };
    
    return obj;
}

// 描绘并标识一个点
function paintPoint(ctx,x,y,text,color){
    var xReal=x*SCALE_UNIT;
    var yReal=y*SCALE_UNIT;

    ctx.strokeStyle=color;
    ctx.lineWidth=0.5;

    // 划线
    ctx.save();
    ctx.setLineDash([5,5]);
    ctx.beginPath();    
    ctx.moveTo(xReal,0);
    ctx.lineTo(xReal,yReal);
    ctx.lineTo(0,yReal);
    ctx.stroke();
    ctx.restore();

    // 画圈
    ctx.beginPath();
    ctx.arc(xReal,yReal,4,0,Math.PI*2,false);
    ctx.closePath();    
    ctx.stroke();

    // 写文字
    var metrics = ctx.measureText(text);
    var textWidth = metrics.width;
    drawText(ctx,text,xReal+textWidth+2,yReal-5,color,12);
}

// 连点成线画曲线
function paintCurve(ctx,color,cds){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth=1;

    ctx.beginPath();     
    for(var i=0; i<cds.length; i++){
        let y=cds[i].y;
        if(Math.abs(cds[i].y*SCALE_UNIT)<300){
            ctx.lineTo(cds[i].x*SCALE_UNIT,cds[i].y*SCALE_UNIT);
        }
    }     
    ctx.stroke();  
    ctx.restore();
}

// 找到坐标数组的最大最小值
function findMaxMin(cds){
    if(cds.length<1){
        return null;
    }

    var retval={max:-10000,max_x:0,min:10000,min_x:0};

    for(var i=0;i<cds.length;i++){
        var y=cds[i].y;

        if(y>retval.max){
            retval.max=y;
            retval.max_x=cds[i].x;
        }

        if(y<retval.min){
            retval.min=y;
            retval.min_x=cds[i].x;
        }
    } 

    return retval;
}

// 绘出最大最小值
function markMaxMin(ctx,mm,color){
    if(mm==null){
        return;
    }

    // 最大值
    var x=mm.max_x;
    var y=mm.max;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.arc(x*SCALE_UNIT,y*SCALE_UNIT,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.stroke();
    var text="max@x="+x.toFixed(3)+" y="+y.toFixed(3);
    drawText(ctx,text,x*SCALE_UNIT,y*SCALE_UNIT,color,12);

    // 最小值
    var x=mm.min_x;
    var y=mm.min;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.arc(x*SCALE_UNIT,y*SCALE_UNIT,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.stroke();
    var text="min@x="+x.toFixed(3)+" y="+y.toFixed(3);
    drawText(ctx,text,x*SCALE_UNIT,y*SCALE_UNIT,color,12);
}

// 定点画实心圆
function drawSolidCircle(ctx,x,y,r,color){
      ctx.save();
      ctx.beginPath();
      ctx.arc(x,y,r,0,2*Math.PI);
      ctx.fillStyle=color;
      ctx.fill();
      ctx.restore();
}

// 两点之间画线段
function drawLine(ctx,x1,y1,x2,y2,color){
    ctx.save();
    ctx.lineWidth=0.25;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 画横轴
function drawAxisX(ctx,start,end,step){
    const AXISY_COLOR="black";

    ctx.save();
    
    ctx.lineWidth=0.5;
    ctx.strokeStyle=AXISY_COLOR;

    // 画轴
    ctx.beginPath();
    ctx.moveTo(start, 0);
    ctx.lineTo(end, 0);
    ctx.stroke();
    ctx.closePath();

    // 画箭头
    ctx.beginPath();
    ctx.moveTo(end-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10);
    ctx.lineTo(end, 0);
    ctx.lineTo(end-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10);
    ctx.stroke();
    ctx.closePath();
    
    // 画刻度
    var x,y;
    y=5;
    for(x=start;x<end;x+=step){
        if(x==0){
            continue;
        }

        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, y);
        
        ctx.stroke();
        ctx.closePath();

        var text=formatScale(x/SCALE_UNIT);
        drawText(ctx,text,x,y-20,AXISY_COLOR,12);
    }

    ctx.restore();
}

// 画纵轴
function drawAxisY(ctx,start,end,step){
    const AXISY_COLOR="black";
        
    ctx.save();
    
    ctx.lineWidth=0.5;
    ctx.strokeStyle=AXISY_COLOR;

    // 画轴
    ctx.beginPath();
    ctx.moveTo(0, start);
    ctx.lineTo(0, end);
    ctx.stroke();
    ctx.closePath();

    // 画箭头
    ctx.beginPath();
    ctx.moveTo(Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
    ctx.lineTo(0, end);
    ctx.lineTo(-Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
    ctx.stroke();
    ctx.closePath();
    
    // 画刻度
    var x,y;
    x=5;
    for(y=start;y<end;y+=step){
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(0, y);
        
        var text=formatScale(y/SCALE_UNIT);
        var metrics = ctx.measureText(text);
        var textWidth = metrics.width;
        drawText(ctx,text,x-textWidth-5,y,AXISY_COLOR,12);

        ctx.stroke();
        ctx.closePath();
    }

    ctx.restore();
}

//-------------------------------
// 得到整型后的刻度
//-------------------------------
function formatScale(scale){
    var s=scale*10;
    if(s % 5==0){
        return scale+"";
    }else{
        return scale.toFixed(2);
    }
}

// 画网格线
function drawGrid(ctx,x1,y1,step1,x2,y2,step2){
    ctx.save();
    
    ctx.lineWidth=0.25;
    ctx.strokeStyle="lightgrey";    

    // 分十格
    var x,y;
    for(x=x1;x<x2;x+=step1/10){
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.stroke();
        ctx.closePath();
    }

    for(y=y1;y<y2;y+=step2/10){
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.stroke();
        ctx.closePath();
    }

    // 十小格间的分割线
    ctx.lineWidth=0.25;
    ctx.strokeStyle="grey";
    ctx.setLineDash([5,5]);// 设置虚线,起止点间包含五空格五划线共十段

    for(x=x1;x<x2;x+=step1){
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.stroke();
    }

    for(y=y1;y<y2;y+=step2){
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.stroke();
    }

    ctx.restore();
}

//-------------------------------
// 角度得到弧度
//-------------------------------
function getRad(degree){
    return degree/180*Math.PI;
}

//-------------------------------
// 得到颜色
//-------------------------------
function getColor(index){
    var arr=[
        "maroon" /* 栗色 */,
        "orange" /* 橙色 */,
        "blue"   /* 蓝色 */,
        "green"  /* 绿色 */,       
        "fuchsia"/* 紫红 */,        
        "grey"   /* 灰色 */,
        "lime"   /* 酸橙 */,        
        "navy"   /* 海蓝 */,        
        "purple" /* 紫色 */,
        "skyblue"/* 天蓝 */,
        "teal"   /* 蓝绿 */,
        "yellow" /* 亮黄 */,
        "aqua"   /* 湖绿 */,
        "red"    /* 红色 */,        
        "black"  /* 黑色 */,    
    ];

    return arr[index % arr.length];
}

//-------------------------------------
// 绘制文字,指定颜色
// ctx:绘图环境
// text:文字
// x,y:坐标
// color:颜色
// size:字体大小
//-------------------------------------
function drawText(ctx,text,x,y,color,size){
    ctx.save();
    ctx.translate(x,y)
    ctx.rotate(getRad(180))
    ctx.scale(-1,1)

    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.fillStyle=color;
    ctx.font = size+"px consolas";

    ctx.fillText(text,0,0);
    ctx.restore();
}

// JS开立方
function kaiLiFang(x){
    if(x>0){
        return Math.pow(x,1/3);
    }else{
        return -Math.pow(-x,1/3);
    }
}
//-->
/****************************************
遇到事情，要学会沉住气，在默默无闻中积攒
力量，等待厚积薄发的一天。
****************************************/
</script>

【图三代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>UNASSIGNED</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        border:0px solid red;
        width:1200px;height:600px;
     }
     </style>
     </head>

     <body οnlοad="draw();">
        <div class="centerlize">
            <canvas id="myCanvas" width="10px" height="10px" style="border:1px dashed black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码拷贝下来，粘贴到文本编辑器中，另存为.html文件，
* 再用chrome浏览器打开，就能看到动画效果。
******************************************************************/

// 系统常量定义处
const TITLE="图三 f(x)=e^x-ln(x+1) 图线 ";    // 图像标题
const WIDTH=1200;                    // 画布宽度
const HEIGHT=600;                    // 画布高度
const SCALE_UNIT=50;                 // 缩放比例 25对应x∈[-24,24],100对应x∈[-6,6]

// 系统变量定义处
var context=0;                        // 画布环境
var stage;                            // 舞台对象
var timeElapsed=0;                    // 动画运作的的时间
const TIME_END=100000;                // 动画运作的期限

//-------------------------------
// Canvas开始运作，由body_onload调用
//-------------------------------
function draw(){
    document.title=TITLE;

    // 画图前初始化
    var canvas=document.getElementById('myCanvas');    
    canvas.width=WIDTH;
    canvas.height=HEIGHT; 
    context=canvas.getContext('2d');  
    
    // 进行屏幕坐标系到笛卡尔坐标系的变换
    // 处置完成前，原点在左上角，向右为X正向，向下为Y的正向
    // 处置完毕后，原点移动到画布中央，向右为X正向，向上为Y的正向
    context.translate(WIDTH/2,HEIGHT/2);
    context.rotate(Math.PI);
    context.scale(-1,1);

    // 初始化舞台
    stage=new Stage();

    // 开始动画
    animate();
};

//-------------------------------
// 画图
//-------------------------------
function animate(){    
    timeElapsed+=1;// 时间每轮增加1

    stage.update(timeElapsed);
    stage.paintBg(context);
    stage.paint(context);

    if(timeElapsed<TIME_END){        
        window.requestAnimationFrame(animate);
    }
}

//-------------------------------
// 舞台对象定义处
//-------------------------------
function Stage(){
    // 内置对象(非必要勿更改)
    var obj=new Object;

    // 对象下的曲线数组(非必要勿更改)
    obj.curves=[];

    // 塞入曲线1(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x-ln(x+1)",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x)-Math.log(x+1);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线2(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=e^x",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=Math.pow(Math.E,x);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线3(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=x+1",
        xEnd:3,
        x:-2,
        y:0,
        setY:function(x){
            this.y=x+1;// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线4(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=ln(x+1)",
        xEnd:3,
        x:-1,
        y:0,
        setY:function(x){
            this.y=Math.log(x+1);// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });

    // 塞入曲线5(按需修改设定项)
    obj.curves.push({
        name:"曲线:f(x)=x",
        xEnd:3,
        x:-3,
        y:0,
        setY:function(x){
            this.y=x;// 解析式

            let coord={"x":x,"y":this.y};    
            
            if(x<0){
                this.pts0.push(coord);
            }else{
                this.pts1.push(coord);
            }
        },
        "pts0":[],
        "pts1":[],
    });
                                
    // 随时间更新位置(非必要勿更改)
    obj.update=function(t){
        for(var i=0;i<this.curves.length;i++){
            var curve=this.curves[i];

            if(curve.x<curve.xEnd){
                curve.x+=0.01;
                curve.setY(curve.x);
            }
        }
    };

    // 画前景
    obj.paint=function(ctx){  
        // 手动标记点
        //paintPoint(ctx,1,0,"a","navy");
        //paintPoint(ctx,0,1,"b","navy");

        // 文字左上角位置(可手动修改设定值)
        const X_START=-230;    // 文字横起点
        const Y_START=150;    // 文字纵起点
        const OFFSET=50;    // 文字间隔
        // 遍历曲线数组(非必要勿更改)
        for(var i=0;i<this.curves.length;i++){
            var curve=this.curves[i];
            var color=getColor(i);

            // 曲线名称
            drawText(ctx,curve.name,X_START,Y_START-i*OFFSET,color,18);
            // 曲线当前点坐标
            drawText(ctx,"当前 X:"+curve.x.toFixed(3)+"  Y:"+curve.y.toFixed(3),X_START,Y_START-20-(i)*OFFSET,color,18);
            
            // 绘制曲线
            if(curve.pts0){
                paintCurve(ctx,color,curve.pts0);
                
                // 绘制曲线分段1的高低点(可选)
                //var mm=findMaxMin(curve.pts0);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts1){
                paintCurve(ctx,color,curve.pts1);
                // 绘制曲线分段2的高低点(可选)
                //var mm=findMaxMin(curve.pts1);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts2){
                paintCurve(ctx,color,curve.pts2);
                // 绘制曲线分段3的高低点(可选)
                //var mm=findMaxMin(curve.pts2);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts3){
                paintCurve(ctx,color,curve.pts3);
                // 绘制曲线分段4的高低点(可选)
                //var mm=findMaxMin(curve.pts3);
                //markMaxMin(ctx,mm,color);
            }
            if(curve.pts4){
                paintCurve(ctx,color,curve.pts4);
                // 绘制曲线分段4的高低点(可选)
                //var mm=findMaxMin(curve.pts3);
                //markMaxMin(ctx,mm,color);
            }
        }
    };

    // 画背景(非必要不更改)
    obj.paintBg=function(ctx){
        // 清屏
        ctx.clearRect(-600,-300,1200,600);
        ctx.fillStyle="rgb(251,255,253)";
        ctx.fillRect(-600,-300,1200,600);

        // 画X轴
        drawAxisX(ctx,-600,600,50);

        // 画Y轴
        drawAxisY(ctx,-300,300,50);

        // 画网格线
        drawGrid(ctx,-600,-300,50,1200,600,50);
        
        // 左上角标题
        var metrics = ctx.measureText(TITLE);
        var textWidth = metrics.width;
        drawText(ctx,TITLE,-WIDTH/2+textWidth+3,HEIGHT/2-30,"grey",18);

        // 右下角作者，日期
        const waterMarkTxt="逆火原创@"+(new Date()).toLocaleDateString();
        metrics = ctx.measureText(waterMarkTxt);
        textWidth = metrics.width;
        drawText(ctx,waterMarkTxt,WIDTH/2-textWidth,-HEIGHT/2,"lightGrey",16);
    };
    
    return obj;
}

// 描绘并标识一个点
function paintPoint(ctx,x,y,text,color){
    var xReal=x*SCALE_UNIT;
    var yReal=y*SCALE_UNIT;

    ctx.strokeStyle=color;
    ctx.lineWidth=0.5;

    // 划线
    ctx.save();
    ctx.setLineDash([5,5]);
    ctx.beginPath();    
    ctx.moveTo(xReal,0);
    ctx.lineTo(xReal,yReal);
    ctx.lineTo(0,yReal);
    ctx.stroke();
    ctx.restore();

    // 画圈
    ctx.beginPath();
    ctx.arc(xReal,yReal,4,0,Math.PI*2,false);
    ctx.closePath();    
    ctx.stroke();

    // 写文字
    var metrics = ctx.measureText(text);
    var textWidth = metrics.width;
    drawText(ctx,text,xReal+textWidth+2,yReal-5,color,12);
}

// 连点成线画曲线
function paintCurve(ctx,color,cds){
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth=1;

    ctx.beginPath();     
    for(var i=0; i<cds.length; i++){
        let y=cds[i].y;
        if(Math.abs(cds[i].y*SCALE_UNIT)<300){
            ctx.lineTo(cds[i].x*SCALE_UNIT,cds[i].y*SCALE_UNIT);
        }
    }     
    ctx.stroke();  
    ctx.restore();
}

// 找到坐标数组的最大最小值
function findMaxMin(cds){
    if(cds.length<1){
        return null;
    }

    var retval={max:-10000,max_x:0,min:10000,min_x:0};

    for(var i=0;i<cds.length;i++){
        var y=cds[i].y;

        if(y>retval.max){
            retval.max=y;
            retval.max_x=cds[i].x;
        }

        if(y<retval.min){
            retval.min=y;
            retval.min_x=cds[i].x;
        }
    } 

    return retval;
}

// 绘出最大最小值
function markMaxMin(ctx,mm,color){
    if(mm==null){
        return;
    }

    // 最大值
    var x=mm.max_x;
    var y=mm.max;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.arc(x*SCALE_UNIT,y*SCALE_UNIT,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.stroke();
    var text="max@x="+x.toFixed(3)+" y="+y.toFixed(3);
    drawText(ctx,text,x*SCALE_UNIT,y*SCALE_UNIT,color,12);

    // 最小值
    var x=mm.min_x;
    var y=mm.min;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.arc(x*SCALE_UNIT,y*SCALE_UNIT,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.stroke();
    var text="min@x="+x.toFixed(3)+" y="+y.toFixed(3);
    drawText(ctx,text,x*SCALE_UNIT,y*SCALE_UNIT,color,12);
}

// 定点画实心圆
function drawSolidCircle(ctx,x,y,r,color){
      ctx.save();
      ctx.beginPath();
      ctx.arc(x,y,r,0,2*Math.PI);
      ctx.fillStyle=color;
      ctx.fill();
      ctx.restore();
}

// 两点之间画线段
function drawLine(ctx,x1,y1,x2,y2,color){
    ctx.save();
    ctx.lineWidth=0.25;
    ctx.strokeStyle=color;
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

// 画横轴
function drawAxisX(ctx,start,end,step){
    const AXISY_COLOR="black";

    ctx.save();
    
    ctx.lineWidth=0.5;
    ctx.strokeStyle=AXISY_COLOR;

    // 画轴
    ctx.beginPath();
    ctx.moveTo(start, 0);
    ctx.lineTo(end, 0);
    ctx.stroke();
    ctx.closePath();

    // 画箭头
    ctx.beginPath();
    ctx.moveTo(end-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10);
    ctx.lineTo(end, 0);
    ctx.lineTo(end-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10);
    ctx.stroke();
    ctx.closePath();
    
    // 画刻度
    var x,y;
    y=5;
    for(x=start;x<end;x+=step){
        if(x==0){
            continue;
        }

        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, y);
        
        ctx.stroke();
        ctx.closePath();

        var text=formatScale(x/SCALE_UNIT);
        drawText(ctx,text,x,y-20,AXISY_COLOR,12);
    }

    ctx.restore();
}

// 画纵轴
function drawAxisY(ctx,start,end,step){
    const AXISY_COLOR="black";
        
    ctx.save();
    
    ctx.lineWidth=0.5;
    ctx.strokeStyle=AXISY_COLOR;

    // 画轴
    ctx.beginPath();
    ctx.moveTo(0, start);
    ctx.lineTo(0, end);
    ctx.stroke();
    ctx.closePath();

    // 画箭头
    ctx.beginPath();
    ctx.moveTo(Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
    ctx.lineTo(0, end);
    ctx.lineTo(-Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
    ctx.stroke();
    ctx.closePath();
    
    // 画刻度
    var x,y;
    x=5;
    for(y=start;y<end;y+=step){
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(0, y);
        
        var text=formatScale(y/SCALE_UNIT);
        var metrics = ctx.measureText(text);
        var textWidth = metrics.width;
        drawText(ctx,text,x-textWidth-5,y,AXISY_COLOR,12);

        ctx.stroke();
        ctx.closePath();
    }

    ctx.restore();
}

//-------------------------------
// 得到整型后的刻度
//-------------------------------
function formatScale(scale){
    var s=scale*10;
    if(s % 5==0){
        return scale+"";
    }else{
        return scale.toFixed(2);
    }
}

// 画网格线
function drawGrid(ctx,x1,y1,step1,x2,y2,step2){
    ctx.save();
    
    ctx.lineWidth=0.25;
    ctx.strokeStyle="lightgrey";    

    // 分十格
    var x,y;
    for(x=x1;x<x2;x+=step1/10){
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.stroke();
        ctx.closePath();
    }

    for(y=y1;y<y2;y+=step2/10){
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.stroke();
        ctx.closePath();
    }

    // 十小格间的分割线
    ctx.lineWidth=0.25;
    ctx.strokeStyle="grey";
    ctx.setLineDash([5,5]);// 设置虚线,起止点间包含五空格五划线共十段

    for(x=x1;x<x2;x+=step1){
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.stroke();
    }

    for(y=y1;y<y2;y+=step2){
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.stroke();
    }

    ctx.restore();
}

//-------------------------------
// 角度得到弧度
//-------------------------------
function getRad(degree){
    return degree/180*Math.PI;
}

//-------------------------------
// 得到颜色
//-------------------------------
function getColor(index){
    var arr=[
        "maroon" /* 栗色 */,
        "orange" /* 橙色 */,
        "blue"   /* 蓝色 */,
        "green"  /* 绿色 */,       
        "fuchsia"/* 紫红 */,        
        "grey"   /* 灰色 */,
        "lime"   /* 酸橙 */,        
        "navy"   /* 海蓝 */,        
        "purple" /* 紫色 */,
        "skyblue"/* 天蓝 */,
        "teal"   /* 蓝绿 */,
        "yellow" /* 亮黄 */,
        "aqua"   /* 湖绿 */,
        "red"    /* 红色 */,        
        "black"  /* 黑色 */,    
    ];

    return arr[index % arr.length];
}

//-------------------------------------
// 绘制文字,指定颜色
// ctx:绘图环境
// text:文字
// x,y:坐标
// color:颜色
// size:字体大小
//-------------------------------------
function drawText(ctx,text,x,y,color,size){
    ctx.save();
    ctx.translate(x,y)
    ctx.rotate(getRad(180))
    ctx.scale(-1,1)

    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.fillStyle=color;
    ctx.font = size+"px consolas";

    ctx.fillText(text,0,0);
    ctx.restore();
}

// JS开立方
function kaiLiFang(x){
    if(x>0){
        return Math.pow(x,1/3);
    }else{
        return -Math.pow(-x,1/3);
    }
}
//-->
/****************************************
遇到事情，要学会沉住气，在默默无闻中积攒
力量，等待厚积薄发的一天。
****************************************/
</script>

END

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2179823.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Hbase要点简记

Hbase要点简记

Hbase要点简记 Hbase1、底层架构2、表逻辑结构 Hbase HBase是一个分布式的、列式的、实时查询的、非关系型数据库&#xff0c;可以处理PB级别的数据&#xff0c;吞吐量可以到的百万查询/每秒。主要应用于接口等实时数据应用需求&#xff0c;针对具体需求&#xff0c;设计高效率…
阅读更多...
A Learning-Based Approach to Static Program Slicing —— 论文笔记

A Learning-Based Approach to Static Program Slicing —— 论文笔记

A Learning-Based Approach to Static Program Slicing OOPLSA’2024 文章目录 A Learning-Based Approach to Static Program Slicing1. Abstract2. Motivation(1) 为什么需要能处理不完整代码(2) 现有方法局限性(3) 验证局限性: 初步实验研究实验设计何为不完整代码实验结果…
阅读更多...
【Vite】项目中scss 保存后 文件编译成了wxss，已解决

【Vite】项目中scss 保存后 文件编译成了wxss，已解决

文章目录 前言一、在 vscode 中安装 easy sass 扩展二、在微信开发者工具导入 vscode 安装的 easy sass 扩展三、修改 easy sass 配置 前言 最近学习使用vite,在vite中使用sass 的时候每次保存都把scss文件编译成wxss文件。众所周知&#xff0c;wxss文件是微信小程序的样式。当…
阅读更多...
开放式蓝牙耳机推荐性价比？开放式耳机性价比排行榜！

开放式蓝牙耳机推荐性价比？开放式耳机性价比排行榜！

耳机在日常生活中几乎成了大多数人的必备伴侣&#xff0c;无论是听音乐、玩游戏还是追剧&#xff0c;都扮演着不可或缺的角色。但是&#xff0c;面对市场上众多的耳机品牌和款式&#xff0c;要找到一款真正符合个人需求的产品并不容易。尤其是考虑到传统入耳式耳机可能在长时间…
阅读更多...
PN8035非隔离12V450mA开关电源芯片SOP8/DIP8封装

PN8035非隔离12V450mA开关电源芯片SOP8/DIP8封装

PN8035 高性能非隔离交直流转换芯片 PN8035SEC-R1 SOP8 12V 0.45A PN8035NE-A1 DIP8 12V 0.45A PN8035集成PFM控制器及650V高雪崩能力智能功率MOSFET&#xff0c;用于外围元器件极精简的小功率非隔离开关电源。PN8035内置高压启动模块&#xff0c;实现系统快速启动、…
阅读更多...
Arthas tt（方法执行数据的时空隧道，记录下指定方法每次调用的入参和返回信息，并能对这些不同的时间下调用进行观测）

Arthas tt（方法执行数据的时空隧道，记录下指定方法每次调用的入参和返回信息，并能对这些不同的时间下调用进行观测）

文章目录 二、命令列表2.3 monitor/watch/trace/stack/tt 相关2.3.4 tt&#xff08;方法执行数据的时空隧道&#xff0c;记录下指定方法每次调用的入参和返回信息&#xff0c;并能对这些不同的时间下调用进行观测&#xff09;举例1&#xff1a;记录调用举例2&#xff1a;显示所…
阅读更多...
Apriori算法介绍（Python实现）

Apriori算法介绍（Python实现）

1.Apriori算法简介 Apriori算法是经典的挖掘频繁项集和关联规则的数据挖掘算法。A priori在拉丁语中指"来自以前"。当定义问题时&#xff0c;通常会使用先验知识或者假设&#xff0c;这被称作"一个先验"&#xff08;a priori&#xff09;。Apriori算法的名…
阅读更多...
数据结构 ——— 顺序表oj题：编写函数，删除有序数组中的重复项

数据结构 ——— 顺序表oj题：编写函数，删除有序数组中的重复项

目录 题目要求 代码实现 题目要求 一个升序排列的数组 nums &#xff0c;要求原地删除重复出现的元素&#xff0c;使每个元素只出现一次&#xff0c;并返回删除后数组的新长度&#xff0c;元素的相对顺序应该保持一致 代码实现 代码演示&#xff1a; int removeDuplicate…
阅读更多...
Unity3D 创建一个人物，实现人物的移动

Unity3D 创建一个人物，实现人物的移动

1&#xff0c;创建项目 首先打开我们的Unity Hub 在我们的编译器下面新建项目&#xff0c;选择3D模板&#xff0c;更改一下我们的项目名称&#xff0c;选择一下路径&#xff0c;然后点击创建项目 等待项目创建。。。。。。 我们在项目里先创建一个plane&#xff0c;这样有点视…
阅读更多...
大数据处理从零开始————8.基于Java构建WordCount项目

大数据处理从零开始————8.基于Java构建WordCount项目

1.配置项目环境 1.1 配置ide工具 下载IntelliJ IDEA。 Download IntelliJ IDEA – The Leading Java and Kotlin IDE (jetbrains.com.cn) 全部下一步&#xff0c;中途遇到需要勾选的全部勾选即可。 安装可以参考下面文章&#xff1a; 【附安装包】IDEA下载、安装、配置与使用&…
阅读更多...
Chris，36岁勇辞管理，重回开发：一场高龄远程工作者有违常理的自我追寻。

Chris，36岁勇辞管理，重回开发：一场高龄远程工作者有违常理的自我追寻。

这是《开发者说》的第18期&#xff0c;本期我们邀请的优秀远程开发者是Chris&#xff0c;同时他也是位知名博主&#xff1a;高龄程序员。 36岁&#xff0c;从世人艳羡的高管回到开发。诧异、不解、质疑……充斥不绝。是自绝后路&#xff0c;还是东山再起&#xff1f; 07年本科…
阅读更多...
RocksDB Compaction的常见问题

RocksDB Compaction的常见问题

1 概述 TiKV 底层存储引擎使用 RocksDB &#xff0c;RocksDB 是一个基于 LSM tree 的单机嵌入式数据库&#xff0c; 对于LSM Tree 来说compaction是个非常重要的操作&#xff0c;本文对TiKV中涉及的compaction相关内容进行了整理总结。 2 为什么需要 compaction ? LSM Tree 通…
阅读更多...
Oracle数据恢复—异常断电导致Oracle数据库报错的数据恢复案例

Oracle数据恢复—异常断电导致Oracle数据库报错的数据恢复案例

Oracle数据库故障&#xff1a; 机房异常断电后&#xff0c;Oracle数据库启库报错&#xff1a;“system01.dbf需要更多的恢复来保持一致性&#xff0c;数据库无法打开”。数据库没有备份&#xff0c;归档日志不连续。用户方提供了Oracle数据库的在线文件&#xff0c;需要恢复zxf…
阅读更多...
嵌入式linux系统中库函数如何提高效率

嵌入式linux系统中库函数如何提高效率

工作中总是会用到各种库，比如本地使用静态库，下载源上的动态库;面试时也会经常性的问到，下面我做了一系列的总结，希望大家可以快速掌握各种库，以及库的制作和使用。 一、什么是库及其作用 库(英文为library)是一组预先编写好的代码、函数、类和其他程序组件的集合…
阅读更多...
“迷雾深渊”炮击图设计

“迷雾深渊”炮击图设计

python尝试C题目&#xff0c;ai查错审码还写“代码解读”和学习总结。 (笔记模板由python脚本于2024年09月29日 10:51:58创建&#xff0c;本篇笔记适合喜欢python&#xff0c;鼓捣算法的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/…
阅读更多...
OpenWrt学习（四）

OpenWrt学习（四）

分区、外网、OPKG 了解分区 在Linux系统中对闪存类存储器是采用MTD（内存技术设备）类设备驱动实现的，MTD是用于访问内存类设备（ROM、Flash）的Linux驱动子系统。它的主要目的是使Flash闪存类设备更容易被访问，为此它在硬件和上层提供了一个抽象的接口使得在操作系统下我们…
阅读更多...
基于 ESP-AT 固件从外部服务器获取文件，使用分段续传的方式

基于 ESP-AT 固件从外部服务器获取文件，使用分段续传的方式

**可使用 ATHTTPCGET 指令获取 HTTP\HTTPS 的资源&#xff0c;将返回资源的 Size 和 Data ** AT 指令序列如下&#xff1a; ATRESTOREATCWMODE1 //设置 WiFi Station 模式ATCWJAP"cc2.4","12345678" //连接 WiFi ATHTTPCHEAD…
阅读更多...
前端 vue3 对接科大讯飞的语音在线合成API

前端 vue3 对接科大讯飞的语音在线合成API

主要的功能就是将文本转为语音&#xff0c;可以播放。 看了看官方提供的demo&#xff0c;嗯....没看懂。最后还是去网上找的。 网上提供的案例&#xff0c;很多都是有局限性的&#xff0c;我找的那个他只能读取第一段数据&#xff0c;剩下的不读取。 科大讯飞的接口&#xf…
阅读更多...
中国一定赞！北京华联BHGMall献礼祖国75周年华诞，创新践行促消费体验再升级

中国一定赞！北京华联BHGMall献礼祖国75周年华诞，创新践行促消费体验再升级

北京华联BHGMall [华联股份(000882)] 作为零售行业核心力量&#xff0c;以广大消费者为核心&#xff0c;不断提升自身竞争力、优化服务、以实惠的价格优质的品牌组合创新的营销活动&#xff0c;带来全新的购物消费体验。 让利于民&#xff0c;以缤纷活动点燃国庆热烈氛围 金秋…
阅读更多...
OpenAI创始成员Andrej Karpathy：这才是技术之美

OpenAI创始成员Andrej Karpathy：这才是技术之美

来源 | 机器之心 技术应该是什么样子&#xff1f; 我们知道乔布斯有「为改变混乱繁杂而生的现代简约主义」的设计理念。所以苹果提供的科技产品都是简洁的。可斯人已逝&#xff0c;如今我们身边的科技产品似乎又进入了复杂与不实用的怪圈之中。 近日&#xff0c;知名 AI 领域学…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023