<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas雪花</title>

</head>

<body>

<canvas id="canvas"></canvas>

<script>

    var c = document.getElementById("canvas").getContext("2d");

    c.width = window.innerWidth;

    c.height = window.innerHeight;

    var deg = Math.PI/180;

    function snowflake(c,n,x,y,len) {

        c.save();

        c.translate(x,y);

        c.moveTo(0,0);

        leg(n);

        c.rotate(-120*deg);

        leg(n);

        c.rotate(-120*deg);

        leg(n);

        c.closePath();

        c.restore();

        function leg(n) {

            c.save();

            if(n == 0){

                c.lineTo(len,0);

            }else{

                c.scale(1/3,1/3);

                leg(n-1);

                c.rotate(60*deg);

                leg(n-1);

                c.rotate(-120*deg);

                leg(n-1);

                c.rotate(60*deg);

                leg(n-1);

            }

            c.restore();

            c.translate(len,0);

        }

    }

    snowflake(c,6,115,115,125);

    c.stroke();

</script>

</body>

</html>

canvas雪花的更多相关文章

  1. ~~圣诞节到啦, canvas雪花效果, 漂亮到简直没天理啊~~

    看到coding的主界面有雪花, 原来,哇,  真漂亮, 一看源代码, 哦了个去, angular写的, 压力好大, 分析分析分析分析.... 然后就写成jQ插件的样子给大家用了. 在线预览的页面是: ...

  2. canvas雪花特效-jQuery插件实现

    这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...

  3. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  4. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

  5. canvas绘图基础及基于粒子系统的雪花飘落

    canvas是html中的一个元素,可以通过js操控绘图! 可以绘制各种图形,各种填充样式! 绘制时可以进行旋转,缩放,平移,但并不是很灵活! 有一对比较好用的方法是save restore! sav ...

  6. HTML5 canvas绘制雪花飘落

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

  7. canvas制作雪花效果

    <!DOCTYPE html><html> <head>    <meta http-equiv="Content-type" conte ...

  8. canvas离屏、旋转效果实践——旋转的雪花

    效果展示理论基础--"常见的canvas优化--模糊问题.旋转效果" 用离屏canvas画基础部分 1.封装画线函数 function drawLine(ctx,x1,y1,x2, ...

  9. canvas 3D雪花效果

    <!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset=&qu ...

随机推荐

  1. 阿里云centos配置postfix

    1. 为了防止垃圾邮件,先到域名控制面板设置好. MX A 记录及TXT记录 其中TXT记录如下  @  spf1 a mx ~all 意思就是使用spf1协议,允许a记录和MX记录对应的IP,不允许 ...

  2. 在昆明网络SEO的走向站外的优化该何去何从？

    昨天大概讲了SEO的站内优化,今天我们来讲讲网站站外的优化. 站外主要以第三平台为主,其中包含站外推广:常规推广.外链建设:利用第三方平台优化关键词排名: 1.博客平台,现在有好多博客平台是很不错的, ...

  3. 10个鲜为人知的C#关键字

    在正式开始之前,我需要先声明:这些关键字对于偏向底层的程序员更加耳熟能详,对这些关键字不了解并不影响你作为一个合格的程序员. 这意味着这些关键字会让你在编写程序时得到更好的代码质量和可读性,enjoy ...

  4. C#获得时间段

    DateTime today = dt.Date;//今天 00:00:00 DateTime tomorrow = dt.Date.AddDays(1);//明天 00:00:00 DateTime ...

  5. 使用duilib开发简单的Window安装包

    一.具体思路 安装过程:安装包的制作包括资源文件的打包,资源文件打包到安装包exe中,安装的时候需要从exe中提取出对应的资源文件, 然后解压文件安装到指定目录,然后就是对安装的可执行程序进行注册表的 ...

  6. 《Linux命令行与shell脚本编程大全》第九章 安装软件程序

    包管理系统(PMS):用来进行软件安装.管理和删除的命令行工具 9.1包管理基础 1.主流的Linux发行版都采用了某种形式的包管理系统来控制软件和库的安装 2.PMS用一个数据库来记录:系统上安装了 ...

  7. 使用Docker跑MySQL 作为Django的存储后端

    Docker的好处不科普了,用过的都说好. 不想污染自己开发机器上的文件环境,本萌新使用Docker运行Mysql,Redis来作为Django的存储后端和缓存. 在第一次安装过程中,我遇到了一些问题 ...

  8. TCP网络程序实例——服务器端与客户端交互

    实例02 客户端/服务器的交互 实例位置:光盘\Code\SL\14\02 视频位置:光盘\Video\14\ ◆ 服务器端 创建服务器端项目Server,在Main方法中创建TCP连接对象:然后监听 ...

  9. 安装freemarker模板的ftl插件

    安装freemarker模板的ftl插件 同意协议 等待运行完成 重新启动eclipse 查看是否生效

  10. Python学习笔记整理总结【Memcache & Redis】

    一.Memcached1.简介Memcached 是一个高性能的分布式内存对象缓存系统,一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展性.用来存储 ...