canvars 画花

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();//关闭路径    })()

转载于:https://www.cnblogs.com/y-lin/p/6678846.html

canvars 画花相关推荐

python之turtle画花
语言: python 工具: Pycharm 2021.3.2 文件: main.py代码及解释: 导入文件floowers.py import flowers 调用flowers的flower方法画 ...
python---6行代码，画花
Python 特点 1.易于学习:Python有相对较少的关键字,结构简单,和一个明确定义的语法,学习起来更加简单. 2.易于阅读:Python代码定义的更清晰. 3.易于维护:Python的成功在于 ...
html+js画一颗心形,js画花构成心型
先看效果尝试点击,IE9+ http://hovertree.com/texiao/html5/23/ 创意来自于网络可搜搜[何问起] 看上去像是[当耐特]的作品的加工版本代码当然要自己写了 ...
python乌龟画花_使用Python的Swampy程序包中的“乌龟”画花朵，螺旋线，打字等
练习4-2 写一组合适的通用函数,用来画出下图所示的花朵图案. 这个是搬运过来的,代码如下: from swampy.TurtleWorld import * from math import * d ...
python画花女朋友_教你使用python画一朵花送女朋友
本文实例为大家分享了用python画一朵花的具体代码,供大家参考,具体内容如下第一种,画法 from turtle import * import time setup(600,800,0,0) s ...
python画花的代码怎么打不开_怎么用python画玫瑰花，求大神贴代码，感激不尽
满意答案 Exlibrisdc 2018.05.19 采纳率:59% 等级:8 已帮助:4259人 import turtle # 设置初始位置 turtle.penup() turtle.le ...
python乌龟画花_python turtle画花
[LeetCode] Reconstruct Original Digits from English 从英文中重建数字 Given a non-empty string containing an ...
python turtle画花
turtle是一个功能强调大的绘图的库,可以用来绘制各种所需要的图案,但是在使用时需要计算好角度等一系列的问题. 代码(源自<Python语言程序设计>)如下: 运行结果: 转载于:htt ...
python用turtle画小人-画一个心送给心爱的小姐姐，Python绘图库Turtle
import turtle turtle.setup(1200, 600) #窗口大小 #画心 turtle.color("black", "red") tur ...

canvars 画花

canvars 画花相关推荐

最新文章

热门文章