<!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. java 整型数组基本排序,冒泡,快速选择,插入,归并

    在学java泛型,于是把排序拿来练练手了 import java.util.Arrays; public class GenericArraySort { public static void mai ...

  2. 用C#生成不重复的随机数

    我们在做能自动生成试卷的考试系统时,常常需要随机生成一组不重复的题目,在.net Framework中提供了一个专门用来产生随机数的类System.Random. 对于随机数,大家都知道,计算机不 可 ...

  3. 使用GetThumbnailImage进行图片缩放操作

    /// <summary>        /// 获取等比例缩放图片的方法        /// </summary>        /// <param name=&q ...

  4. Angular 5和ASP.NET Core入门

    我希望你们都知道Angular 5已经发布了.在本文中,我们将看到如何使用Angular5TemplateCore开始使用Angular 5和ASP.NET Core. 使用Angular5Templ ...

  5. C语言的第一个程序 “hello world!”

    1,C语言的简介        C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. ...

  6. C语言一些知识点回顾

    1.多行宏定义 #include <stdio.h> #define _PyObject_HEAD_EXTRA \ struct _object *_ob_next; \ struct _ ...

  7. Web攻击技术

    Web攻击技术 1.针对Web的攻击技术 1.1.在客户端即可篡改请求 在Web应用中,从浏览器那接收到的Http的全部内容,都可以在客户端自由地变更.篡改,所以Web应用可能会接收到与预期数据不相同 ...

  8. .net core 支付宝，微信支付 二

    源码: https://github.com/aspros-luo/Qwerty.Payment/tree/develop 今天开始微信支付 微信支付坑比较多,支付流程也不太一样,微信支付需要先生成预 ...

  9. 如何用Python写一个计算器软件 附带效果图

    该计算器使用Python  tkinter模块开发 效果如下图 import tkinter #导入tkinter模块 root = tkinter.Tk() root.minsize(280,500 ...

  10. 搭建php环境的几种方法

    对于想学习php开发初学者来说,先要学习搭建php开发环境,因为要做php开发,搭建一个能够运行php网站的服务器环境是第一步,传统的php环境软件非常复杂,好在很多公司开发了一键搭建php安装环境, ...