首页 > 其他分享 >【230916-2】幂函数y=x^3的图像

【230916-2】幂函数y=x^3的图像

时间：2023-09-16 16:04:48浏览次数：240  
标签：function 幂函数 230916 ctx getRad context 图像 var stage

【图像】

【230916-2】幂函数y=x^3的图像_幂函数 y=x^3 图像

【代码】

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

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

// 画布高度
const HEIGHT=600;

// 画布环境
var context=0;   

// 舞台对象
var stage;

// 消逝的时间
var timeElapsed=0;

// 核心勾画函数，由body_onload调用
function draw(){
    // 画图前初始化
    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(getRad(180));
    context.scale(-1,1);

    // 之后再移动原点和改变横纵比例
    // 进行坐标原点的平移
    //context.translate(0,0);
    // 进行横纵方向的比例转换
    //context.scale(1,1);

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

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

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

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

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

//-------------------------------
// 舞台对象定义处
//-------------------------------
function Stage(){
    var obj=new Object;

    obj.prpty={"x":-50,"y":0,"pts":[]};

    // 随时间更新位置
    obj.update=function(t){
        obj.prpty.x+=1;
        obj.prpty.y=Math.pow(obj.prpty.x,3);
        let arr={"x":obj.prpty.x,"y":obj.prpty.y};
        this.prpty.pts.push(arr);
    };

    // 画前景
    obj.paint=function(ctx){  
        // 写当前点坐标
        drawText2(ctx," 红色 X:"+this.prpty.x.toFixed(3)+"  Y:"+this.prpty.y.toFixed(3),300,85,"navy");

        // 红色曲线y=1.1^x
        paintCurve(ctx,"red",this.prpty.pts);
    };

    // 画背景
    obj.paintBg=function(ctx){
        // 清屏
        ctx.clearRect(-600,-300,1200,600);

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

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

        // 画网格线
        drawGrid(ctx,-600,-300,50,1200,600,50,"grey");
        
        // 作者，日期
        drawText2(ctx,"幂函数y=x^3图示",-500,-160,"navy");

        drawText2(ctx,"逆火",-500,-200,"navy");
        drawText2(ctx,"2023/9/16",-500,-220,"navy");
    };
    
    return obj;
}

// 定点画实心圆
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.stroke();
      ctx.restore();
}

// 两点之间画线段
function drawLine(ctx,x1,y1,x2,y2,color){
    ctx.save();

    ctx.lineWidth=0.25;
    ctx.strokeStyle=color;
    ctx.fillStyle=color;

    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.closePath();

    ctx.restore();
}

// 连点成线画曲线
function paintCurve(ctx,color,cds){
    var SU=1;// Scale Unit

    ctx.strokeStyle = color;
    ctx.beginPath();        
    for(var i=0; i<cds.length; i++){
        let y=cds[i].y;
        if(y<300 && y>-300){ // y指超出范围就不画了
            ctx.lineTo(cds[i].x*SU,cds[i].y*SU);
        }
    }         
    ctx.stroke();
    ctx.closePath();
}

// 画横轴
function drawAxisX(ctx,start,end,step){
    ctx.save();
    
    ctx.lineWidth=0.25;
    ctx.strokeStyle='navy';
    ctx.fillStyle='navy';

    // 画轴
    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){
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, y);
        
        ctx.stroke();
        ctx.closePath();

        drawText(ctx,x/1+"",x,y-20);
    }

    ctx.restore();
}

// 画纵轴
function drawAxisY(ctx,start,end,step){
    ctx.save();
    
    ctx.lineWidth=0.5;
    ctx.strokeStyle='navy';
    ctx.fillStyle='navy';

    // 画轴
    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);
        
        drawText(ctx,y/1+"",x-15,y);

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

    ctx.restore();
}

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

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

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

    ctx.restore();
}

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

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

    if(index>arr.length){
        index=index % arr.length;
    }

    return arr[index];
}

//-------------------------------------
// 绘制文字,不指定颜色
//-------------------------------------
function drawText(ctx,text,x,y){
    ctx.save();
    ctx.translate(x,y)
    ctx.rotate(getRad(180))
    ctx.scale(-1,1)

    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.fillText(text,0,0);
    ctx.restore();
}

//-------------------------------------
// 绘制文字,指定颜色
//-------------------------------------
function drawText2(ctx,text,x,y,color){
    ctx.save();
    ctx.translate(x,y)
    ctx.rotate(getRad(180))
    ctx.scale(-1,1)

    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.fillStyle=color;
    ctx.fillText(text,0,0);
    ctx.restore();
}
//-->
</script>

END

标签：function,幂函数,230916,ctx,getRad,context,图像,var,stage
From： https://blog.51cto.com/u_7726611/7493952

相关文章

  • 20230916 AccessVBA-导入Excel表格到表
    导入excel表格内容到数据表，关键语句为TransferSpreadsheet，eg：DoCmd.TransferSpreadsheetacImport,,"toolShopeeId","d:\access\DownloadShopeeId",True,""关于参数详细信息参见MS帮助参数1acImport表示从excel导入到数据表参数2“toolShopeeId”，数据库里要导入到的数......
  • 《动手学深度学习 Pytorch版》 6.2 图像卷积
    importtorchfromtorchimportnnfromd2limporttorchasd2l6.2.1互相关计算X=torch.tensor([[0.0,1.0,2.0],[3.0,4.0,5.0],[6.0,7.0,8.0]])K=torch.tensor([[0.0,1.0],[2.0,3.0]])此处应为：012345678*0123=......
  • Python机器学习——鸟类图像分类
    （一）选题背景：1.生物多样性保护：鸟类是地球上最为丰富和多样的脊椎动物类群之一，对于生态系统的稳定和生物多样性的维持起着重要作用。通过开展鸟类图像分类研究，可以帮助精确地辨别鸟类物种，有助于监测鸟类的分布、数量和迁徙情况，从而更好地实施生物多样性保护和生态环境管理。......
  • 图像语义分割的图片标注及标注图片的读取 --- labelme
    labelme的安装1：先打开anacondaprompt命令行创建一个虚拟环境：condacreate--namelabelmepython=3.6condacreate-nlabpython=3.6  2:激活虚拟环境：condaactivatelab 3:安装labelme:4：输入labelme->系统会打开labelme的界面   单张图片和......
  • 深度学习---图像目标检测网络
    前面介绍了图像分类网络，并重点解析了ResNet及其应用以及MobileNet系列的轻量化分类网络，这一篇接着介绍图像目标检测网络。目标检测具有巨大的实用价值和应用前景。应用领域包括人脸检测、行人检测、车辆检测、飞机航拍或卫星图像中道路的检测、车载摄像机图像中的障碍物检测、医......
  • Recognize Anything:一个强大的图像标记模型
    RecognizeAnything是一种新的图像标记基础模型，与传统模型不同，它不依赖于手动注释进行训练;相反，它利用大规模的图像-文本对。RAM的开发过程包括四个关键阶段:通过自动文本语义解析获得大规模的无标注图像标签。结合标题和标注任务，训练一个自动标注的初步模型。该模型由原始文本......
  • FFMPEG--使用Filter实现YUV图像翻转
    工具：ffmpeg过滤器模块相关过滤器，其创建过程如下：创建一个过滤器节点，如overlay：avfilter_get_by_name(“overlay”);创建一个过滤器上下文并将其添加到FilterGraph上，如：avfilter_graph_create_filter(&overlayFilter_ctx,overlayFilter,“overlay”,“y=0:H/2”,NULL,filter_graph......
  • 计算机视觉算法中的GrabCut图像分割（GrabCut Image Segmentation）
    计算机视觉算法中的GrabCut图像分割（GrabCutImageSegmentation）引言图像分割是计算机视觉领域的一个重要任务，它的目标是将图像中的像素分成不同的区域或对象。GrabCut是一种经典的图像分割算法，它基于图割理论和高斯混合模型，能够有效地将图像中的前景和背景进行分离。本文将介绍Grab......
  • 基于深度学习的图像识别技术研究
    基于深度学习的图像识别技术是计算机视觉领域的一个重要研究方向，它已经在多个领域取得了巨大的成功。下面是关于这一技术研究的一些重要方面：1.卷积神经网络(CNNs)： CNNs是深度学习中用于图像识别的基本工具。它们模拟了人类视觉系统的工作原理，通过一系列卷积和池化层来提取图......
  • 【230909-4】椭圆:x^2/120^2+y^2/150^2=1 图像及性质
    【图像】【代码】<!DOCTYPEhtml><htmllang="utf-8"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><head><title>椭圆:x^2/120^2+y^2/150^2=1</title><styletype=&quo......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99