如何用html5编写彩色同心圆,HTML5 canvas 同心圆动画

原创。产生的动画效果:

* 生成文字渐变颜色随时间的变化。

* 使得一组同心圆的取色,随时间而变化

1.[图片] open_source.png

22101626_m5ft.png

2.[代码][JavaScript]代码

var c=new Array("red","blue","cyan","darkGray","green","lightGrey","orange","pink","magenta","lightBlue","yellow","black");

var d =220;

var x0=200;

var y0=200;

var ticker =0; //一组同心圆的取色,随 ticker 的递增而变化

var index=-595;//为文字设置渐变颜色,其范围随index变化而变。

var direction=1;

function drawName(){

var canvas =document.getElementById("myCanvas");

var gg =canvas.getContext("2d");

var gradient=gg.createLinearGradient(index,0,600,0);

if (direction==1) index = index + 5;

else if (direction==0) index = index - 5;

if (index==600) direction=0;

if (index==-600) direction=1;

for (var i=0;i<=10;i++)//设立渐变填色

gradient.addColorStop(i/10,c[i]);

// 让画笔 gg 使用渐变填色

gg.fillStyle=gradient;

gg.font ="100px KAITI";

gg.fillText("开源中国",20, 80);

}

function draw() {

drawConcentric( 210, 300);

}

function drawConcentric( x0, y0){

var canvas =document.getElementById("myCanvas");

var gg =canvas.getContext("2d");

for (var i=1; i<11; i++){

gg.fillStyle=c[(i+ticker)%c.length];//取余,保证下标有效

gg.beginPath();

gg.arc(x0,y0, d - 20*i , 0, 2*Math.PI);

gg.fill();

}

ticker++; //一组同心圆的取色,随 ticker 的递增而变化

}

function preparation(){;

setInterval('drawConcentric(220,300)',500)

setInterval('drawName()',50);

}

同心圆

#myCanvas{

width:900;

height:600;

position:absolute;left;0px;top;0px;

}

Your browser does not support the HTML5 canvas tag.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/346554.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

swiper如何防止冲突_冲突管理:化冲突为机会的8个谈话技巧,从此告别争吵和冷战...

书语人间&#xff1a;每天10分钟&#xff0c;读懂1本好书&#xff0c;点击文章右边的「关注」&#xff0c;一起成长大家好呀~今天&#xff0c;灵遥将继续为你带来《解决冲突的关键技巧&#xff1a;如何增加你的有效社交》一书的共读。上一篇里&#xff0c;我们读到了让聆听和谈…

spss非线性回归分析步骤_SPSS与简单线性回归分析

对数据进行简单线性回归分析常按照以下步骤&#xff1a;1根据研究目的确定因变量和自变量现研究某服装店销售额和客流量的关系&#xff0c;销售额为因变量&#xff0c;客流量为自变量&#xff0c;共计36条数据。2 判断有无异常值判断方法&#xff1a;⑴通过绘制散点图直观观察&…

计算机网络由核心通信,计算机网络系统是由通信子网和什么构成的

计算机网络系统是一个集计算机硬件设备、通信设施、软件系统及数据处理能力为一体的,能够实现资源共享的现代化综合服务系统。计算机网络系统的组成可分为三个部分,即硬件系统,软件系统及网络信息系统。1. 硬件系统硬件系统是计算机网络的基础。硬件系统有计算机、通信设备、连…

jwt私钥和公钥怎么获取_jwt 用rsa公钥私钥进行验证(python发送,java接受)

JWT的主要应用场景身份认证在这种场景下&#xff0c;一旦用户完成了登陆&#xff0c;在接下来的每个请求中包含JWT&#xff0c;可以用来验证用户身份以及对路由&#xff0c;服务和资源的访问权限进行验证。由于它的开销非常小&#xff0c;可以轻松的在不同域名的系统中传递&…

通过OAuth 2.0和Okta构建具有安全的服务器到服务器通信的Spring Boot应用

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕&#xff1f; 尝试使用Okta API进行托管身份验证&#xff0c;授权和多因素身份验证。 大多数OAuth 2.0指南都围绕用户的上下文&#xff0c;即使用Google&#xff0c;Github…

springboot java获取版本号_深入实践Spring Boot 实战篇,大佬整理出的PDF文档

如何使用Spring Boot 本文章将会详细介绍如何使用Spring Boot。它覆盖了构建系统&#xff0c;自动配置和运行/部署选项等主题。我们也覆盖了一些Spring Boot最佳实践。尽管Spring Boot没有什么特别的(只是一个你能消费的库)&#xff0c;但仍有一些建议&#xff0c;如果你遵循的…

vue v html安全,vue 中控制v-html 中的样式,但不影响全局的小技巧

我们知道在 Vue 中&#xff0c;style可以用两种方式来导入&#xff1a;// method1import (./a.css);//method2复制代码但是不管哪一种&#xff0c;导进的css文件都是应用于全局的&#xff0c;有时候我们不想要这样的效果。而要使得css只对当前的组件有效&#xff0c;即局部应用…

6 redis 编译失败_Centos7.8环境搭建Redis主从复制和哨兵模式

本节我们搭建Redis主从复制和哨兵模式集群&#xff0c;集群的好处是把数据分散不不同的服务器上&#xff0c;解决网站中的很多高并发&#xff0c;高负载等问题&#xff0c;很好的提高网站的性能&#xff0c;也能解决mysql的数据读写问题&#xff0c;所以我们搭建集群非常有必要…

springboot异步注解_Spring Boot 2 :Spring Boot 中的响应式编程和 WebFlux 入门

【小宅按】Spring 5.0 中发布了重量级组件 Webflux&#xff0c;拉起了响应式编程的规模使用序幕。WebFlux 使用的场景是异步非阻塞的&#xff0c;使用 Webflux 作为系统解决方案&#xff0c;在大多数场景下可以提高系统吞吐量。Spring Boot 2.0 是基于 Spring5 构建而成&#x…

结尾的单词_22个以“ez”结尾的西语单词,你掌握了吗?

22 palabras que terminan en -ez22个以“-ez”结尾的西语单词ntido → nitidez 清澈&#xff0c;透明lcido → lucidez 光亮&#xff1b;清楚plido → palidez 苍白&#xff1b;暗淡rpido → rapidez 迅速cido → acidez 酸性estrecho → estrechez 狭窄esbelto → esb…

python xlwt xlrd模块详解_python操作excel之xlrd、xlwt模块详解

python操作excel主要用到xlrd和xlwt这两个库&#xff0c;即xlrd是读excel&#xff0c;xlwt是写excel的库。 可从这里下载https://pypi.python.org/pypi。下面分别记录python读和写excel. python读excel——xlrd 这个过程有几个比较麻烦的问题&#xff0c;比如读取日期、读合并单…

江苏省计算机等级知识,江苏省计算机二级考试基础知识_计算机基础练习题

计算机及发展1&#xff0e;早期计算机的主要应用是_________。A&#xff0e;科学计算 B. 信息处理 C. 实时控制 D. 辅助设计2&#xff0e;数据库技术在信息系统中主要用于_________。A&#xff0e;信息采集 B. 信息存储 C. 信息传输 D. 信息检索3&#xff0e;中国的巨型机的典型…

java知识回顾_Java7 –回顾

java知识回顾我开始写博客文章&#xff0c;介绍即将发布的Java8版本中的新增功能 &#xff0c;并认为我将从快速回顾一下Java7带给我们的内容开始。 Java7于2011年7月发布&#xff0c;被描述为“更具进化性而非革命性”。 “虽然有了一些重大改进&#xff0c;但并没有真正破土…

python应届生找工作在深圳_应届毕业程序员找工作,企业最看重你们这些地方

这篇文章来谈一下应届生找工作的问题&#xff0c;最近有很多在校大学生跟我咨询很多企业很多工作要求有工作经验&#xff0c;那这样没工作经验的人都去哪学经验&#xff0c;要求工作经验真的有必要吗&#xff1f;应届生毕业找工作&#xff0c;一直有一个困惑是什么&#xff0c;…

计算机模拟技术在教学上的应用,计算机模拟技术在水利工程学科试验教学中的应用...

[摘要]本文对水利工程试验教学中计算机模拟技术的应用问题进行了初步探讨&#xff0c;计算机模拟是一项技术&#xff0c;同时也是一种学习环境、教学模式、教学思想。计算机模拟教学应用的研究涉及了现代教育技术、教育心理、课程结构、教学内容的安排等多个领域。本文尝试为水…

PHP密码问题陈婷代码_PHP实现登录注册

一、首先实现一个PHP的简单登录注册的话 我们要简单的与后端定义一下接口和传输数据的方式 并且我们要有一个phpStudy服务器。第一步&#xff1a;当我们点击注册按钮的时候数据库要接收到客户端请求的数据 第二步&#xff1a;接收到数据以后服务器要处理数据&#xff1a;1.确定…

在Spring Boot中使用Vaadin的简介

介绍 Vaadin的工作方式依赖于服务器端渲染&#xff0c;因此可以自然地集成到诸如Spring之类的框架中。 Vaadin的Spring集成已经存在了一段时间&#xff0c;并且提供了用于在Spring容器中配置和管理Vaadin的工具&#xff0c;如果您希望将Vaadin与Spring Boot结合使用&#xff0c…

python如何读取数据保存为新格式_python,初学者应用实例:读取文件中的数据,将将北京时间转换成世界时间,再保存成新的CSV格式文件...

数据格式转换是科研工作中经常需要完成的任务。本程序实现了这个功能。将文本文件“TableS1.dat”中的数据读取&#xff0c;原文件格式为&#xff1a; No Date Time Mag Dis 11999/07/2505:28:39.580 21999/07/2523:06:31.940 31999/08/0601:54:40.6001.012.5 41999/08/1708:01…

哈工大三本计算机考研,纯干货【普通三本逆袭哈工大】—城市规划考研必胜经验...

【专业课】楼主就想起来什么就总结点什么吧&#xff0c;你们就知足吧&#xff01;话说专业课是你相对来说比较吃亏的一科目(与本校学生相比较)&#xff0c;为什么说吃亏呢&#xff1f;No.1&#xff1a;人家本校都学过&#xff0c;至少知道每门课的知识点是什么&#xff0c;每个…

excel转las文件_这3种Word、Excel格式不变的互转方法,实在太好用了

日常工作中用Word写总结、写报告&#xff0c;写分析&#xff0c;一定离不开数据支持。但在制作的过程中你一定碰到过这些问题&#xff1a;Excel里做的表格、图表&#xff0c;一复制到word就变的乱七八糟&#xff01;那么&#xff0c;有没有什么好的方法&#xff0c;即省时&…