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. java的Scanner获取输入内容

    //导入 scanner的包 import java.util.Scanner; Scanner scanner = new Scanner(System.in); System.out.printl ...

  2. 连接oracle数据库报错：TNS-12516 TNS:listener could not find available handler with matching protocol stack解决方法

    导致此问题的可能原因为:数据库的当前会话说不满足造成的. 解决方法如下: (1)连接数据库: [localhost@oracle]$:sqlplus  /nolog sql>conn  / as ...

  3. 启动tomcat报错Caused by: java.io.FileNotFoundException: class path resource [io/renren/controller/NodeDataController] cannot be opened because it does not exist

    ?? 清理项目,再重启服务就好了.........

  4. Oracle数据库常用的sql语句

    1. select * from emp; 2. select empno, ename, job from emp; 3. select empno 编号, ename 姓名, job 工作 fro ...

  5. 虚拟机CentOs的安装及大数据的环境搭建

      大数据问题汇总     1.安装问题        1.安装步骤,详见文档<centos虚拟机安装指南>        2.vi编辑器使用问题,详见文档<linux常用命令.pd ...

  6. WebGIS博客文本分析（词频分析）手动扒取 去除格式 词语分割 统计分析

    1.      [置顶](一)开篇—杂谈WebGIS 摘要: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 ...

  7. 2017-2018-1 20155326 《信息安全系统设计基础》第四周学习总结及myod改进版的补交

    2017-2018-1 20155326 <信息安全系统设计基础>第四周学习总结及myod改进版的补交 学习内容 补充完成课上没有完成的内容 学习教材附录A,第十章内容 参考别出心裁的Li ...

  8. 马士兵 spring 视频笔记

    课程内容 1.       面向接口(抽象)编程的概念与好处 2.       IOC/DI的概念与好处 a)       inversion of control b)       dependen ...

  9. 还原wubutu系统

    虚拟机->快照 进行系统还原备份

  10. 关于质能等效的两个思想实验 Two Ideological Experiments on Mass-Energy Equivalence

    大家知道,物质和能量是等效的,虽然质能方程已暗示了这种等效关系,但并非显而易见.此等效性可以从以下两个思想实验中获知. 实验一:一台电子称上放置一个金属物体,加热它,称的读数将会略微增加.这是因为金属 ...