【Canvas/数学】抛物线y=x^2/256的图像及特征

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量49 收藏
点赞数
分类专栏： 图形 数学 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/132805004
版权

图像：

代码:

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>抛物线x^2=256y</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="1200px" height="600px" style="border:1px dashed black;">
                您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
// 画布宽度
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<500){        
        window.requestAnimationFrame(animate);
    }
}

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

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

    // 随时间更新
    obj.update=function(t){
        obj.prpty.x+=1;// 横坐标递增
        obj.prpty.y=(obj.prpty.x*obj.prpty.x)/256;
        var arr={"x":obj.prpty.x,"y":obj.prpty.y};
        this.prpty.points1.push(arr);
    };

    // 画前景
    obj.paint=function(ctx){  
        
        paintCurve(ctx,"maroon",this.prpty.points1);

        // 绘制焦点到当前点的连线
        ctx.save();
        ctx.lineWidth=0.25;
        ctx.strokeStyle='navy';
        ctx.fillStyle='navy';

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

        ctx.beginPath();
        ctx.moveTo(this.prpty.x, this.prpty.y);
        ctx.lineTo(this.prpty.x, -64);
        ctx.stroke();
        ctx.closePath();

        ctx.restore();

        // 绘制准线
        ctx.save();
        ctx.lineWidth=0.25;
        ctx.strokeStyle='red';
        ctx.fillStyle='red';

        ctx.beginPath();
        ctx.moveTo(-300, -64);
        ctx.lineTo(300, -64);
        ctx.stroke();
        ctx.closePath();

        ctx.restore();
    };

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

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

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

        // 标注文字
        drawText(ctx,"曲线类型:抛物线",-500,250);
        drawText(ctx,"标准方程:x^2=256y(p=128)",-500,230);
        drawText(ctx,"解析式:y=x^2/256",-500,210);
        drawText(ctx,"顶点:(0,0)",-500,190);
        drawText(ctx,"对称轴:y轴",-500,170);
        drawText(ctx,"焦点:(0,64)",-500,150);
        drawText(ctx,"准线方程:y=-64",-500,130);
        drawText(ctx,"离心率:e=1",-500,110);

        drawText(ctx,"逆火",-500,70);
        drawText(ctx,"2023/9/8",-500,50);

        // 写当前点坐标
        drawText(ctx," 当前 X:"+this.prpty.x.toFixed(3)+"  Y:"+this.prpty.y.toFixed(3),300,-85);

    };
    
    return obj;
}

// 连点成线画曲线
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();
    }
}

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

//-------------------------------
// 得到颜色
//-------------------------------
function getColor(index){
    var arr=["red","purple","blue","green","skyblue","yellow","#aa0000",
             "orange","maroon","navy",
             "lime","teal","fuchsia",
             "aqua","black"];

    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

普兰店拉马努金
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Canvas/数学】抛物线y^2=256x的图像及特征
一念非凡(46岁待业程序员)
09-11 78
drawText(ctx," 当前 X:"+this.prpty.x.toFixed(3)+" Y:"+this.prpty.y.toFixed(3),300,-85);drawText(ctx,"标准方程:y^2=256x(p=128)",-500,230);drawText(ctx,"解析式:y=16x^1/2",-500,210);drawText(ctx,"焦点:(64,0)",-500,150);drawText(ctx,"顶点:(0,0)",-500,190);// 绘制焦点到当前点的连线。
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
qq_40517035的博客
12-12 750
AS特效小白进。AS大佬也进吧。 代码多有不足，恳请指正。
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效（富文本编辑器）
qq_40517035的博客
12-12 2029
AS特效小白进。AS大佬也进吧。 代码多有不足，恳请指正。
jQuery模拟抛物线轨迹动画
kevin_xiang的专栏
08-04 3938
http://www.html5tricks.com/jquery-parabola.html 利用jQuery和HTML5可以模拟很多数学中的函数图象，比如HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件，可以开始和暂停抛物线的运动，以及重新设置抛物线的参数。 在线演示源码下载 下面简单了解一下实现这个jQuer
可视化中的数学基础知识
NOSaac的博客
05-13 2701
可视化学习的基础数学知识，本文通过数学计算、几何直观理解、代码实现来加深对可视化中的数学基础知识的理解。
基于canvas实现物理运动效果与动画效果(一)
weixin_30360497的博客
04-16 160
一、为什么要写这篇文章 某年某月某时某种原因，我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码，心中很是欣喜，故而写这篇文章来向这位大神致敬，同时也为了弥补自己在运动效果和动画效果制作方面的不足 二、几种简单的直线运动 这一部分主要讲解的是简单的运动效果的实现原理，其实所有的canvas动画效果的实现在核心思想是一致的：都是先定义个初始的状态，然后定义一个定时器，定时器内执行一个...
指令式绘图系统：如何用Canvas绘制层次关系图？
sunnyjingqi的博客
08-04 2499
Canvas 是可视化领域里非常重要且常用的图形系统，在可视化项目中，它能够帮助我们将数据内容以几何图形的形式，非常方便地呈现出来。 这篇文章主要会讲解如何用它的2D上下文来完成绘图，不会去讲和它有关的所有Api，重点只是希望通过调用一些常用的API讲清楚，Canvas2D能做什么、要怎么使用，以及它的局限性是什么。最后，还会用Canvas绘制一个表示省市关系的层次关系图（Hierarchy Graph）。 如何用Canvas绘制几何图形？ 首先，我们通过一个绘制红色正方形的简单例子，来讲一讲Canv
JavaScript操作canvas制作前端H5小游戏——Flappy Bird
热门推荐
kang921022的博客
02-08 1万+
游戏查看源码和素材下载博主学习前端一年多一点，还是个新手，不过勇于尝试，才能不断进步，如果代码质量不好，欢迎提意见，下面开始讲解，首先贴张游戏界面图：游戏使用canvas画图制作，分析游戏确定有这几个元素： 天空背景不动 小鸟上下移动，左右不动 地板和水管向左移动（造成小鸟向前移动的错觉） canvas画图是覆盖画图，所以画图顺序很重要，它的api我就不多说了，只有用到以下内容：<!-- html代
Canvas实现直线与圆形的物理运动效果
XiaoKang的博客
05-04 3394
一、为什么要写这篇文章 某年某月某时某种原因，我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码，心中很是欣喜，故而写这篇文章来向这位大神致敬，同时也为了弥补自己在运动效果和动画效果制作方面的不足 二、几种简单的直线运动 这一部分主要讲解的是简单的运动效果的实现原理，其实所有的canvas动画效果的实现在核心思想是一致的：都是先定义个初始的状态，然后定义一个定时器，定时器
vue2插件之@lucky-canvas/vue，大转盘、抽奖、老虎机
04-26
lucky-canvas-vue2插件.zip
Simple2Canvas:通过画布生成带有JSON数据的图像
05-27
script src =" https://unpkg/simple2canvas/dist/simplecanvas.umd.min.js " > </ script > 用法 const simple2canvas = require ( 'simple2canvas' ) ; const options = { width : 360 , height : ...
canvas 实现点击画线/打点画闭合多边形，靠近元素高亮.html
09-03
canvas 实现点击画线/打点画闭合多边形，靠近元素高亮
初中抛物线演示.html
11-11
初中数学，y=ax^2 + bx +c 中，a、b、c对抛物线的影响的演示，永久免费下载，兼容大多数浏览器，可直接在浏览器打开。
html2canvas 1.0.0-rc.5
07-27
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1061
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 334
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 144
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
import QtQuick 2.4 import QtQuick.Controls 2.5 import QtQuick.Window 2.3 ApplicationWindow { visible: true width: 800 height: 600 title: "Drawing Board Example" Item { width: 400 height: 400 property int gridSize: 20 property int scaleFactor: 100 Canvas { id: canvas anchors.fill: parent onPaint: { var ctx = getContext("2d"); var width = canvas.width; var height = canvas.height; // 清除画布 ctx.clearRect(0, 0, width, height); // 绘制网格线 ctx.strokeStyle = "black"; ctx.lineWidth = 0.2; // 将线宽改小 for (var x = -width/2; x <= width/2; x += parent.gridSize) { ctx.beginPath(); ctx.moveTo(x, -height/2); ctx.lineTo(x, height/2); ctx.stroke(); } for (var y = -height/2; y <= height/2; y += parent.gridSize) { ctx.beginPath(); ctx.moveTo(-width/2, y); ctx.lineTo(width/2, y); ctx.stroke(); } } } MouseArea { anchors.fill: parent property int gridSize: parent.gridSize property int scaleFactor: parent.scaleFactor onWheel: { // 根据滚轮事件的delta属性，计算缩放比例 parent.scaleFactor += wheel.angleDelta.y / 120; parent.scaleFactor = Math.max(parent.scaleFactor, 10); // 最小值为10% // 根据缩放比例重新计算gridSize和canvas的宽度和高度 var newGridSize = parent.scaleFactor / 5; var newWidth = width * parent.scaleFactor / 100; var newHeight = height * parent.scaleFactor / 100; var xDiff = (newWidth - width) / 2; // 计算横向偏移量 var yDiff = (newHeight - height) / 2; // 计算纵向偏移量 parent.gridSize = newGridSize; canvas.width = newWidth; canvas.height = newHeight; canvas.x -= xDiff; // 调整canvas的位置 canvas.y -= yDiff; canvas.requestPaint(); } } } }这段代码的画布大小相对而言变得太小了，请找出问题所在，并改进
06-09
x <= width/2; x += parent.gridSize) { ctx.beginPath(); ctx.moveTo(x, -height/2); ctx.lineTo(x, height/2); ctx.stroke(); } for (var y = -height/2; y <= height/2; y += parent.gridSize) { ctx....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值