| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2078 人关注过本帖
标题:HTML5 — 通过坐标系变换实现绘制科赫雪花
只看楼主 加入收藏
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
结帖率:98.25%
收藏
 问题点数:0 回复次数:8 
HTML5 — 通过坐标系变换实现绘制科赫雪花
<!DOCTYPE html>

<html lang="en" xmlns="http://www.
<head>
    <meta charset="utf-8" />
    <title>通过坐标系变换实现绘制科赫雪花</title>
</head>
<body>
    <canvas id="myCanvas" height="160" width="800"></canvas>
    <script>
        //定义2d绘图对象,定义角度制到弧度制的转换
        var c = document.getElementById('myCanvas').getContext('2d'),
            deg = Math.PI / 180;
        //在画布的上下文c中,以左下角的点(x,y)和边长len,绘制一个n级别的科赫雪花分形
        function snowflake(c, n, x, y, len) {
            //保存当前变换
            c.save();
            //变换原点为起始点
            c.translate(x, y);
            //从新的原点开始一条新的子路径
            c.moveTo(0, 0);
            //绘制雪花的第一条边
            leg(n);
            //现在沿着逆时针方向旋转120°
            c.rotate(-120 * deg);
            //绘制第二条边
            leg(n);
            //再次旋转
            c.rotate(-120 * deg);
            //绘制最后一条边
            leg(n);
            //闭合子路径
            c.closePath();
            //恢复初始的变换
            c.restore();

            //绘制n级别的科赫雪花的一条边
            //此函数在画完一条边的时候就会离开当前点
            //然后通过坐标系变换将当前点又转换成(0,0)
            //这意味着画完一条边之后可以简单地调用rotate()进行旋转
            function leg(n) {
                //保存当前坐标系变换
                c.save();
                if (n == 0) {
                    //不需要递归的情况下,就绘制一条水平线段
                    c.lineTo(len, 0);
                }
                else {
                    //递归情况下,绘制4条子边类似“M”的尖角
                    //子边长度为原始边长的三分之一
                    c.scale(1 / 3, 1 / 3);
                    //递归第一条子边
                    leg(n - 1);
                    //顺时针旋转60°
                    c.rotate(60 * deg);
                    //第二条子边
                    leg(n - 1);
                    //逆时针旋转120°
                    c.rotate(-120 * deg);
                    //第三条子边
                    leg(n - 1);
                    //通过旋转回到初始状态
                    c.rotate(60 * deg);
                    //最后一条边
                    leg(n - 1);
                }
                //恢复坐标系变换
                c.restore();
                //但是通过转换使得边的结束点为(0,0)
                c.translate(len, 0);
            }
        }

        //0级别的雪花就是一个三角形,1级别的雪花就是一个六角形,以此类推
        snowflake(c, 0, 5, 115, 125);
        snowflake(c, 1, 145, 115, 125);
        snowflake(c, 2, 285, 115, 125);
        snowflake(c, 3, 425, 115, 125);
        snowflake(c, 5, 565, 115, 125);
        //勾勒当前复杂的路径
        c.stroke();
    </script>
</body>
</html>
搜索更多相关主题的帖子: 坐标系 上下文 HTML5 title 雪花 
2015-05-25 12:37
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:138
帖 子:2277
专家分:10647
注 册:2015-3-19
收藏
得分:0 
点个赞,向版主学习

剑栈风樯各苦辛,别时冰雪到时春
2015-05-25 12:45
wp231957
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:神界
等 级:贵宾
威 望:423
帖 子:13688
专家分:53332
注 册:2012-10-18
收藏
得分:0 
关注

DO IT YOURSELF !
2015-05-25 14:28
诸葛欧阳
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
来 自:流年
等 级:贵宾
威 望:82
帖 子:2790
专家分:14619
注 册:2014-10-16
收藏
得分:0 
看不懂

一片落叶掉进了回忆的流年。
2015-05-25 16:24
hu9jj
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:红土地
等 级:贵宾
威 望:400
帖 子:11758
专家分:43407
注 册:2006-5-13
收藏
得分:0 
我也看不明白,待有空时试试看。

活到老,学到老!http://www.(该域名已经被ISP盗卖了)E-mail:hu-jj@
2015-05-25 17:16
龙牙
Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15
来 自:大汉
等 级:贵宾
威 望:17
帖 子:769
专家分:6207
注 册:2013-3-18
收藏
得分:0 
学习

只要心是晴朗的,人生就没有雨天。
2015-05-25 18:56
不懂才问
Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15
来 自:大草原
等 级:贵宾
威 望:29
帖 子:1502
专家分:6573
注 册:2010-7-5
收藏
得分:0 
学习

报告老师,我低头不是因为我在装低调,是你问的问题,我真的不会答,,,
2015-05-25 19:09
纳兰伽香
Rank: 10Rank: 10Rank: 10
来 自:北京
等 级:贵宾
威 望:10
帖 子:426
专家分:1650
注 册:2015-4-5
收藏
得分:0 

风回小院庭芜绿,柳眼春相续
2015-05-26 13:31
风吹过b
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:贵宾
威 望:364
帖 子:4937
专家分:30047
注 册:2008-10-15
收藏
得分:0 
看不懂。。。。。。。。。。

授人于鱼,不如授人于渔
早已停用QQ了
2015-05-27 18:03
快速回复:HTML5 — 通过坐标系变换实现绘制科赫雪花
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.014814 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved