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. python报错ModelNotFoundError

    很可能是因为工作目录并不在sys.path中,系统无法默认的找到您的脚本文件,通过以下命令可以解决该问题: >>> import sys>>> sys.path.a ...

  2. 普通用户修改.bash_profile 权限问题

    例如oracle用户想要修改它下面的.bash_profile文件: 在命令行运行: [root@localhost ~]# ls -lh /home/oracle/.bash_profile

  3. java常用设计模式四：观察者模式

    1.定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己.观察者模式又叫发布-订阅(Publis ...

  4. python3.4用函数操作mysql5.7数据库

    #!/usr/bin/env python # -*- coding:utf-8 -*- # __author__ = "blzhu" """ pyt ...

  5. 阿里云oss视频上传不能在线播放,js,javascript,在线播放器,插件

    网页视频播放插件 发现阿里云oss储存,上传了视频不能在线播放. 解决方法:使用插件播放即可解决. <html> <head> <meta charset="u ...

  6. 一些js在线引用文档

    1.jquery在线引用: <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script& ...

  7. 20155326 《Java程序设计》实验五网络编程与安全实验报告

    20155326 <Java程序设计>实验五网络编程与安全实验报告 实验内容 任务一 1.两人一组结对编程: 参考http://www.cnblogs.com/rocedu/p/67667 ...

  8. 23种设计模式(1)-Facade设计模式

    前记 曾经我遇见的一个需求是这样的,接口A有个方法void methodA(),类B需要实现接口A的methodA()方法,并且在类B中需要把methodA()方法内部处理逻辑获得的结果利用C类实例的 ...

  9. poj 1753 2965

    这两道题类似,前者翻转上下左右相邻的棋子,使得棋子同为黑或者同为白.后者翻转同行同列的所有开关,使得开关全被打开. poj 1753 题意:有一4x4棋盘,上面有16枚双面棋子(一面为黑,一面为白), ...

  10. 《principal component analysis based cataract grading and classification》学习笔记

    Abstract A cataract is lens opacification caused by protein denaturation which leads to a decrease i ...