×

HTML5应用:绘制一个心形应用

作者:andy0012021.10.13来源:Web前端之家浏览:626评论:0
关键词:html5css3
微信公众号

微信公众号

HTML5应用:绘制一个心形应用。直接上DEMO。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML5应用:绘制一个心形应用 - Web前端之家www.jiangweishan.com</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>


温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/htm5css420211003.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1