<!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. 用笔记本写C程序

    首先在Visual Studio Tools 文件中打开 Visual Studio 命令提示(2010),输入命令 notepad 打开记事本,写好程序保存,保存类型:所有文档  文件名:1.c . ...

  2. 【Tesseract】Tesseract API在VS 2013中的配置以及调用

    想要在VS中使用Tesseract库,必须使用经过相对应的VS版本编译过的dll以及lib.比如在VS 2013中,就必须使用在VS 2013中编译过的Tesseract库. 这里我给出经过VS 20 ...

  3. Spring面试题目

    问题清单: 1. 什么是Spring框架?Spring框架有哪些主要模块? 2. 使用Spring框架有什么好处? 3. 什么是控制反转(IOC)?什么是依赖注入? 4. 请解释下Spring中的IO ...

  4. 新一代的昆明网络seo优化技巧

    一年一度的双11又即将到来,今天选择在双11这天新注册了一个博客园,第一篇文章,我决定来谈一谈现在的网络SEO. 起首咱们来熟悉下SEO是什么,SEO全名叫Search Engine Optimiza ...

  5. Java 中实现方法重试的一种机制

    有这样一个需求,当调用某个方法抛出异常,比如通过 HttpClient 调用远程接口时由于网络原因报 TimeOut 异常:或者所请求的接口返回类似于"处理中"这样的信息,需要重复 ...

  6. JAVA基础3——常见关键字解读(2)

    synchronized Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 用法说明 synchronized 关键字,它包括两种用法: ...

  7. Bone Collector-HDU

    Many years ago , in Teddy’s hometown there was a man who was called “Bone Collector”. This man like ...

  8. KNN--用于手写数字识别

    优点:精度高,对异常值不敏感,无数据输入假定 缺点:计算复杂度高,空间复杂度高 适用数据范围:数值型和标称型   一般流程:     (1). 收集数据(网络抓取)     (2).处理数据,将数据处 ...

  9. redis 梳理笔记(一)

    一 redis 数据格式 短连接 长连接pconnect tcp协议 交互数据格式 交互采用特殊的格式 \r\n 1."+"号开头表示单行字符串的回复      set aa aa ...

  10. DC 辅域转主域

    DC 辅域转主域 #dc2辅域 角色转移为主域 #查看 netdom query fsmo ntdsutil roles connections #连接主机dc2 connect to server ...