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. redis 的一主二从三哨兵模式

    概述 在部署redis 的时候,如果redis宕机,缓存将不可用,redis提供了哨兵模式保证redis实现高可用. 即一台主机两台从机,三台哨兵主机,如果主实例宕机,哨兵将将一台从机升级为主机.实现 ...

  2. (4)4 larger-than-life lessons from soap operas

    https://www.ted.com/talks/kate_adams_4_larger_than_life_lessons_from_soap_operas/transcript 00:12In ...

  3. MacOS使用常用配置

    如何增加tree命令? 安装Homebrew步骤:http://blog.csdn.net/xianyiqi/article/details/51297562 安装npm步骤:https://blog ...

  4. 【慕课网实战】Spark Streaming实时流处理项目实战笔记十二之铭文升级版

    铭文一级: ======Pull方式整合 Flume Agent的编写: flume_pull_streaming.conf simple-agent.sources = netcat-sources ...

  5. progress 进度条

      进度条.  属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...

  6. java实现在图片上编辑文本内容

    package com.yin.text; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; impor ...

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

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

  8. mysql_变量

    set names gbk; 变量 变量分为两种:系统变量,自定义变量 系统变量:系统定义好的,大部分情况用户不需要使用系统变量,如autocommit,auto_increment_incremen ...

  9. mysql_事务

    事务是针对数据的,不是针对结构的 存储引擎innodb支持事务,myisam不支持事务需求:有一张银行账户表,有A用户给B账户转账,A账户减少,B账户增加,但是A操作之后断电. 解决方案:A减少钱,但 ...

  10. limit

    在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,mysql已经为我们提供了这样一个功能. SELECT * FROM table  LIMIT [offset ...