广告位联系
返回顶部
分享到

html5笛卡尔心形曲线的实现方法

html5 来源:转载 作者:秩名 发布时间:2021-09-08 10:46:27 人浏览
摘要

1650年,斯德哥尔摩的街头,52岁的笛卡尔邂逅了18岁的瑞典公主克里斯

1650年,斯德哥尔摩的街头,52岁的笛卡尔邂逅了18岁的瑞典公主克里斯汀。

那时,落魄、一文不名的笛卡尔过着乞讨的生活,全部的财产只有身上穿的破破烂烂的衣服和随身所带的几本数学书籍。生性清高的笛卡尔从来不开口请求路人施舍,他只是默默地低头在纸上写写画画,潜心于他的数学世界。

一个宁静的午后,笛卡尔照例坐在街头,沐浴在阳光中研究数学问题。他如此沉溺于数学世界,身边过往的人群,喧闹的车马队伍。都无法对他造成干扰。

突然,有人来到他旁边,拍了拍他的肩膀,“你在干什么呢?”扭过头,笛卡尔看到一张年轻秀丽的睑庞,一双清澈的眼睛如湛蓝的湖水,楚楚动人,长长的睫毛一眨一眨的,期待着他的回应。她就是瑞典的小公主,国王最宠爱的女儿克里斯汀。

她蹲下身,拿过笛卡尔的数学书和草稿纸,和他交谈起来。言谈中,他发现,这个小女孩思维敏捷,对数学有着浓厚的兴趣。

和女孩道别后,笛卡尔渐渐忘却了这件事,依旧每天坐在街头写写画画。

几天后,他意外地接到通知,国王聘请他做小公主的数学老师。满心疑惑的笛卡尔跟随前来通知的侍卫一起来到皇宫,在会客厅等候的时候,他听到了从远处传来的银铃般的笑声。转过身,他看到了前儿天在街头偶遇的女孩子。慌忙中,他赶紧低头行礼。

从此,他当上了公主的数学老师。

公主的数学在笛卡尔的悉心指导下突飞猛进,他们之间也开始变得亲密起来。笛卡尔向她介绍了他研究的新领域——直角坐标系。通过它,代数与几何可以结合起来,也就是日后笛卡尔创立的解析几何学的雏形。

在笛卡尔的带领下,克里斯汀走进了奇妙的坐标世界,她对曲线着了迷。每天的形影不离也使他们彼此产生了爱慕之心。

在瑞典这个浪漫的国度里,一段纯粹、美好的爱情悄然萌发。

然而,没过多久,他们的恋情传到了国王的耳朵里。国王大怒,下令马上将笛卡尔处死。在克里斯汀的苦苦哀求下,国王将他放逐回国,公主被软禁在宫中。

当时,欧洲大陆正在流行黑死病。身体孱弱的笛卡尔回到法国后不久,便染上重病。在生命进入倒计时的那段日子,他日夜思念的还是街头偶遇的那张温暖的笑脸。他每天坚持给她写信,盼望着她的回音。然而,这些信都被国王拦截下来,公主一直没有收到他的任何消息。

在笛卡尔给克里斯汀寄出第十三封信后,他永远地离开了这个世界。此时,被软禁在宫中的小公主依然徘徊在皇宫的走廊里,思念着远方的情人。

这最后一封信上没有写一句话,只有一个方程:r=a(1-sinθ)。

国王看不懂,以为这个方程里隐藏着两个人不可告人的秘密,便把全城的数学家召集到皇宫,但是没有人能解开这个函数式。他不忍看着心爱的女儿每天闷闷不 乐,便把这封信给了她。拿到信的克里斯汀欣喜若狂,她立即明白了恋人的意图,找来纸和笔,着手把方程图形画了出来,一颗心形图案出现在眼前,克里斯汀不禁 流下感动的泪水,这条曲线就是著名的“心形线”。

国王去世后,克里斯汀继承王位,登基后,她便立刻派人去法国寻找心上人的下落,收到的却是笛卡尔去世的消息,留下了一个永远的遗憾……

这封享誉世界的另类情书,至今,还保存在欧洲笛卡尔的纪念馆里。

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--<noscript>r = a(1-sin"theta")</noscript>-->
        <canvas id="cardioid" width="600" height="600" style="background: lightblue">
            您的浏览器不支持canvas!
        </canvas>
        <script>
            var cr = document.getElementById("cardioid");
            var W = cr.width/2, H = cr.height/3, R = 150;
            var c = cr.getContext("2d");
            var G = 360, g = 0, T = Math.PI*2, t = T/G;
            c.save();
            c.translate(W, H);
            c.rotate(-T/4);
            //c.fillStyle = "red";
            while(g < G){
            c.save();//c.translate(W, H);
            c.rotate(g*t);
            c.beginPath();
            c.arc(0, -R*(1-Math.sin(++g*t)), 13, 0, 360, false);
            c.closePath();
            c.fill();
            c.restore();
            }
            c.restore();
            g = 0;
            (function draw(){
            if(g < G){
            c.save();
            c.translate(W, H);
            c.rotate(-T/4 + g*t);
            c.fillStyle = "red";
            c.beginPath();
            c.arc(0, -R*(1-Math.sin(++g*t)), 5, 0, 360, false);
            c.closePath();
            c.fill();
            c.restore();
            }
            setTimeout(draw, 1);
            })();
        </script>
    </body>

</html>



<!doctype html>
<html>

    <head>
        <meta charset='UTF-8' />
        <title>Cardioid</title>
    </head>

    <body style="text-align:center;">
        <canvas id="pad" width='500' height='500'>你不换一个浏览器,比如chrome,将无法知道这个秘密。</a>
        </canvas>
        <script type="text/javascript">
            var $id = function(n) {
                return document.getElementById(n) || n;
            }
            window.addEventListener("load", draw, false);
            var con = $id("pad").getContext('2d');
            con.fillStyle = '#e21f27'
            con.translate(200, 100);

            function draw() {
                var r = 0,
                    a = 100,
                    start = 0,
                    end = 0;
                con.rotate(Math.PI);
                for (var q = 0; q < 500; q++) {
                    start += Math.PI * 2 / 500;
                    end = start + Math.PI * 2 / 500;
                    r = a * (1 - Math.sin(start)); //心形极坐标表示法
                    con.arc(0, 0, r, start, end, false);
                }
                con.fill();
            }
        </script>
    </body>

</html>



<html>
    <head>
        <meta charset='UTF-8' />
        <title>LOVE</title>
    </head>
    <body style="text-align:center;">
        <canvas id="pad" width='300' height='500'>提醒您:ie低版本用户请更新你的浏览器</canvas>
        <script type="text/javascript">
            var $id = function(n) {
                return document.getElementById(n) || n;
            }
            window.addEventListener("load", draw, false);
            var con = $id("pad").getContext('2d');
            con.fillStyle = '#e21f27'
            con.translate(100, 100);

            function draw() {
                var r = 0,
                    a = 20,
                    start = 0,
                    end = 0;
                con.rotate(Math.PI);
                for (var q = 0; q < 1000; q++) {
                    start += Math.PI * 2 / 1000;
                    end = start + Math.PI * 2 / 1000;
                    r = a * Math.sqrt(225 / (17 - 16 * Math.sin(start) * Math.sqrt(Math.cos(start) * Math.cos(start))))
                    con.arc(0, 0, r, start, end, false);
                }
                con.fill();
            }
        </script>
    </body>
</html>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jb51.net/html5/788897.html
相关文章
  • HTML5页面打开微信小程序功能实现

    HTML5页面打开微信小程序功能实现
    微信终于支持由页面跳转至小程序啦 ~ 步骤一:绑定域名 登录微信公众平台进入公众号设置的功能设置里填写JS接口安全域名。 步骤二:引
  • html5+实现plus.io进行拍照和图片等获取
    使用Hbuilder开发工具开发:实现可对Android机进行控制和获取资源 说明:IO模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取
  • HTML标签实现带动画的抖音LOGO效果

    HTML标签实现带动画的抖音LOGO效果
    先上结果,最终实现效果如下: 还原度应该还可以吧? 抖音Logo结构 想要用CSS来画抖音的Logo,前提要先了解它的构造,一定是一些几何图形
  • video.js支持m3u8格式直播的实现教程

    video.js支持m3u8格式直播的实现教程
    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生
  • html5调用摄像头截图功能的介绍
    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,
  • 前端监听websocket消息并实时弹出的代码实例介绍

    前端监听websocket消息并实时弹出的代码实例介绍
    本文默认您已掌握react生态开发的相关技术,并熟练应用umiJS的原则上,请继续! 项目需求: 1、服务侧推送给消息给前端,前端需要展示在
  • HTML5新增内容和API介绍

    HTML5新增内容和API介绍
    classList 属性 该属性用于在元素中添加,移除及切换 CSS 类。 classList属性返回元素的类名,作为 DOMTokenList 对象: div id=div class=test1 test2clas
  • 使用canvas仿Echarts实现金字塔图的教程

    使用canvas仿Echarts实现金字塔图的教程
    最近公司项目都偏向于数字化大屏展示????,而这次发给我的项目原型中出现了一个金字塔图?????, 好巧不巧,由于我们的图表都是使用Ech
  • 基于HTML十秒做出淘宝页面的方法

    基于HTML十秒做出淘宝页面的方法
    十秒钟做出一个网页,可能大家看完会觉得有点标题党,其实不然,把别人的抠过来还是可以的 比如我这次先把淘宝的网页扣过来为例 第一
  • HTML5+CSS+JavaScript实现捉虫小游戏的代码

    HTML5+CSS+JavaScript实现捉虫小游戏的代码
    捉虫小游戏 首页展示: 选择昆虫: 效果展示: 有密集恐惧症的别玩哟、游戏永远不会停止 一直玩 项目源码结构: 图片和js以及css等基础
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计