index.html

<!DOCTYPE html>
<html>
<head>
    <title>旋转的花</title>
    <meta charset = "utf-8">
    <!--width - 可视区域的宽度，值可为数字或关键词device-width -->
    <!--height - viewport的高度-->
    <!--initial-scale - 初始的缩放比例-->
    <!--minimum-scale - 允许用户缩放到的最小比例-->
    <!--maximum-scale - 允许用户缩放到的最大比例-->
    <!--user-scalable - 用户是否可以手动缩放-->
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <!--content="telephone=yes" 在iPhone 手机上默认值是（电话号码显示为拨号的超链接）：-->
    <!--可将telephone=no，则手机号码不被显示为拨号链接-->
    <!--使设备浏览网页时对数字不启用电话功能（不同设备解释不同，itouch点击数字为存入联系人，iphone为拨打电话），忽略将页面中的数字识别为电话号码。-->
    <meta name="format-detection" content="telephone=no" />
    <!--忽略识别邮箱-->
    <meta name="format-detection" content="email=no" />
    <!--网站开启对 web app 程序的支持-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--在 web app 应用下状态条（屏幕顶部条）的颜色；(改变顶部状态条的颜色)-->
    <!--默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--http-equiv="Content-Type" 表示描述文档类型-->
    <!--HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容-->
    <meta http-equiv="Content-Type" content="text/html">
    <!-- UC默认竖屏 ，UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!--使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。-->
    <!--应用模式-->
    <meta name="browsermode" content="application">
    <!-- QQ强制竖屏 QQ强制全屏 -->
    <!--设置屏幕方向-->
    <meta name="x5-orientation" content="portrait">
    <!--设置全屏-->
    <meta name="x5-fullscreen" content="true">
    <!--设置屏幕模式-->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" href="./css/style.css">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{lastname}} 家族成员:</h1>
    <ul>
        <li ng-repeat="x in names">{{x}} {{lastname}}</li>
    </ul>
</div>
<div class="canvas">
    <canvas id="id1" class="flower"></canvas>
    <canvas id="id2" class="flower1"></canvas>
</div>
</body>
<script>
    var app = angular.module('myApp', []).controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.lastname =$scope.names[$scope.names.length - 1];
    });
</script>
<script src="./canvas.js"></script>
</html>

style.scss 实现旋转
$color: #ccc;
$rotate_360: rotate(360deg);
$rotateX_360: rotateX(360deg);
$rotateY_360: rotateX(360deg);
$rotate_0: rotate(0deg);
$rotateX_0: rotateX(0deg);
$rotateY_0: rotateX(0deg);

@function animation($title){
    @return $title 8s linear infinite;
}

@mixin prefix($property, $value){
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    -o-#{$property}: $value;
    #{$property}: $value;
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

html{
    height: 100%;
}
body {
    height: 100%;
}

.flower {
    position: absolute;
    @include prefix(animation, animation(myfirst));
}

.flower1 {
    position: relative;
　　top: 0; 
　　left: 0;
    @include prefix(animation, animation(myfirst1));
}

@include keyframes(myfirst) {
    100% {
        @include prefix(transform, $rotate_360);

    }
    0% {
        @include prefix(transform, $rotate_0);

    }
}

@include keyframes(myfirst1) {
    100% {
        @include prefix(transform, $rotate_0);
        //@include prefix(transform, $rotateY_0);
    }
    0% {
        @include prefix(transform, $rotate_360);
        //@include prefix(transform, $rotateY_360);
    }
}

canvas.js 绘画花朵
var canvas;
var context;
function getDom(id){
    canvas = document.getElementById(id);
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight - 300;
    if(canvas == null){
        return false;
    }
    context =canvas.getContext("2d");
}

(function flower(){
        getDom('id1');
        var Xo, Yo, A, B;
        var n = 10;
        context.lineWidth = 1;
        Xo = canvas.width / 2;
        Yo = canvas.height / 2;
        console.log(Xo, Yo, 'Yo')
        A = Yo * 0.75;
        context.save();//保存当前绘制状态
        //context.clearRect(0,0,width,height);//擦除之前绘制的图形
        context.translate(Xo,Yo);//坐标原点移动到canvas元素中央
        context.beginPath();//开始创建路径
        for(B = 0; B < 6.5; B = B + 0.01) {
            r = A * Math.sin(n * B);
            x = r * Math.cos(B);
            y = r * Math.sin(B);
            context.fillStyle = "rgba(0,255,0,.25)";//设置填充颜色
            context.lineTo(-x,-y);//绘制直线
            context.fill();
        }
        context.closePath();//关闭路径

}
)();

(function flower1(){
        getDom('id2');
        var Xo, Yo, A, B;
        var n = 10;
        context.lineWidth = 1;
        Xo = canvas.width / 2;
        Yo = canvas.height / 2;
        A = Yo * 0.45;
        context.save();//保存当前绘制状态
        //context.clearRect(0,0,width,height);//擦除之前绘制的图形
        context.translate(Xo,Yo);//坐标原点移动到canvas元素中央
        context.beginPath();//开始创建路径
        for(B = 0; B < 6.5; B = B + 0.01) {
            r = A * Math.sin(n * B) * Math.exp(-B / (20));
            x = r * Math.cos(B);
            y = r * Math.sin(B);
            context.fillStyle = "rgba(255,0,0,.25)";//设置填充颜色
            context.lineTo(-x,-y);//绘制直线
            context.fill();
        }
        context.closePath();//关闭路径
    }
)()
 

canvars 画花的更多相关文章

  1. 用python程序来画花

    from turtle import * import time setup(600,800,0,0) speed(0) penup() seth(90) fd(340) seth(0) pendow ...

  2. python turtle画花

    turtle是一个功能强调大的绘图的库,可以用来绘制各种所需要的图案,但是在使用时需要计算好角度等一系列的问题. 代码(源自<Python语言程序设计>)如下: 运行结果:

  3. MTK平台如何定位显示花屏和界面错乱等绘制异常的问题？

    [DESCRIPTION] 在测试手机各项功能过程中,经常会遇到概率性复现“屏幕画花了,界面画错乱了等绘制异常问题”,而且概率还非常小: 这类问题请不要直接提交eService,而是先请测试人员及工程 ...

  4. 画一个心送给心爱的小姐姐，Python绘图库Turtle

    Python绘图库Turtle Turtle介绍 Turtle是Python内嵌的绘制线.圆以及其他形状(包括文本)的图形模块. 一个Turtle实际上是一个对象,在导入Turtle模块时,就创建了对 ...

  5. 游戏制作之路：一个对我来说可实现的High-end的Mac/iOS游戏制作大概计划

    对于学习一些东西,我比较习惯任务驱动式的学习,也就是说,要事先订好一个目标,要做什么东西,达到什么效果,然后根据自己了解的知识作一个可以实现这个目标的计划. 现在要学的是游戏制作,而且是High-en ...

  6. 水溶彩铅的特点&技法运用

    工欲善其事必先利其器!亲爱的同学们都准备好画笔了吗?今天,助助为同学们介绍一下水溶性彩色铅笔的特点,技法运用的基本教程,请仔细看哟! [水溶性彩色铅笔的特点] 能够同时画出像铅笔一样的线条和水彩一样的 ...

  7. 大学写作期中作业--霸天黄小o

    霸天黄小o 百无聊赖之中,小o又回想起了它当初的辉煌时刻. 那是凤儿凰自行车厂的又一次大规模交货.虽然其实在500万的订单下,一批又一批的交货几乎是连着的. 但这并不影响小o和与它一届的同学们的意气风 ...

  8. 笨重的mfc还在基于系统控件，熟练的mfc工程师还比不过学习Qt一个月的学生开发效率高（比较精彩，韦易笑）

    作者:韦易笑链接:https://www.zhihu.com/question/29636221/answer/45102191来源:知乎著作权归作者所有,转载请联系作者获得授权. 更新:擦,本来只有 ...

  9. Python Turtle模块的简单应用

    时钟 import turtle as t import datetime as dt #画出背景 game = t.Screen() game.bgcolor("white") ...

随机推荐

  1. poj-2406（字符串hash）

    题目链接:传送门 思路:字符串hash,终止条件竟然判断错了,真是太大意了. #include<iostream> #include<cstdio> #include<c ...

  2. 关于redis，学会这9点就够了

    一.redis是什么 redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存.事件发布或订阅.高速队列等场景.该数据库使用ANSI C语言编写,支持网络,提供字符串.哈希.列表.队 ...

  3. 第二章（java程序设计）第三章（语言基础）

    第二章 2.1 对象 对象的概念是由现实世界引入问题模型: 对象包含有:状态和行为.具体地来说是: 数据封装:对象的方法的作用就是:将内部变量封装起来,提供给外界交互的窗口.(实现对数据的隐藏) 继承 ...

  4. IntelliJ IDEA使用心得之Maven项目篇

    今天和大家分享下,在IDEA中打开Maven项目的方法. 对于新版的IDEA可以直接打开Maven项目,但是对于旧版的IDEA需要使用Maven命令生成项目的IDEA配置文件. 在项目的根目录(即po ...

  5. FreeMarker 处理不存在的变量

    FreeMarker不能容忍引用不存在的变量,除非明确地告诉它当变量不存在时如何处理.这里介绍两种典型的处理方法. 一个不存在的变量和一个是null的变量,对于FreeMarker来说是一样的. 处理 ...

  6. i2c触摸屏驱动文件的实现

    转自:http://blog.chinaunix.net/uid-29507718-id-4314013.html Linux下I2C接口触摸屏驱动分析  分类: LINUX linux下触摸屏驱动的 ...

  7. timeSetEvent

    Header: Declared in Mmsystem.h; include Windows.h.Library: Use Winmm.lib. MSDN里定义的函数原型如下: MMRESULT t ...

  8. 传输层TCP

    /*************************************************************************************************** ...

  9. 冬瓜头答疑：磁盘阵列内部FC-AL的性能问题

    冬瓜头答疑:磁盘阵列内部FC-AL的性能问题 作者:冬瓜头出处:IT专家网2009-08-03 09:59   问: 大多数磁盘阵列都是通过两个控制器后端的端口,组成1/2/4条FC-AL环,来连接所 ...

  10. 初识Android的ReactiveX

    初识Android的ReactiveX 开发一个复杂一点的Android应用都会用到网络请求,交互和动画.这些都意味着 要写很多的回调嵌套.这样的代码也被称为callback hell(回调地狱).这 ...