如何用html5编写彩色同心圆,HTML5 canvas 同心圆动画
原创。产生的动画效果:
* 生成文字渐变颜色随时间的变化。
* 使得一组同心圆的取色,随时间而变化
1.[图片] open_source.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.
如何用html5编写彩色同心圆,HTML5 canvas 同心圆动画相关推荐
- 用html5编写五星红旗图案,HTML5画出五星红旗 | 编程知识库
源码: 中国标准国旗 /** 使用HTML5绘制标准五星红旗 */ var canvas = document.getElementById("canvas"); var cont ...
- html5编写微信留言,HTML5春节(支持微信和填写姓名)祝福所有程序员幸福快乐...
[实例简介] HTML5春节(支持微信和填写姓名)祝福所有程序员幸福快乐 [实例截图] [核心代码] chunjie └── chunjie ├── cjold_m.css ├── index.htm ...
- html游戏让目标人物移动,如何用html5编写鼠标事件与游戏人物移动
前面已经介绍了用仿ActionScript的语法来编写html5的第一篇.第二篇,下面是第三篇,如何用html5编写鼠标事件与游戏人物移动,事不宜迟,赶紧来学习下吧. 一.假设 假设,所有可添加鼠标事 ...
- html5编写网页代码_freeCodeCamp.org的未来-从向世界传授语言到编写代码的5年经验...
html5编写网页代码 freeCodeCamp went live in October 2014. In the five years since, we've done quite a bit. ...
- html5转apicloud,使用APICloud编写优雅的HTML5代码
使用APICloud编写优雅的HTML5代码<一>一.实现下拉刷新: 默认样式>代码清晰简洁明了,符合ECMA262规范的callback,最少只需5行代码: apiready = ...
- html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画 在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例 要在HTML5画布上绘制 ...
- Div层悬浮实现HTML5 Canvas背景动画
在日常的学习中我接触到一些HTML5 Canvas动画,在开发 tiomg.org 太美在线工具网站 的时候,想将这些震撼或小清新的动画融合到工具网站中,这样可以使原本单调的网页看起来丰富和更有设计感 ...
- 电脑PHP动画制作画板,涂鸦板简单实现 Html5编写属于自己的画画板
这篇文章主要教大家如何使用Html5编写属于自己的画画板,进行绘画.调整颜色等操作,感兴趣的小伙伴们可以参考一下 最近了解到html5强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能 ...
- html游戏技术文档编写,HTML5编写的小游戏
HTML5编写的小游戏 HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山> ...
最新文章
- oracle相关操作
- jQuery框架学习第一天:开始认识jQuery
- Tomcat运行出现出现问题(the JRE_HOME environment variable is not defined correctly This environment variabl)
- Android学习笔记之android:collapseColumns,android:shrinkColumns和stretchColumn
- shell 远程协助协助(转载)
- ML.NET机器学习、API容器化与Azure DevOps实践(四):持续集成与k8s持续部署
- 欢乐纪中某B组赛【2019.1.25】
- Linux下C语言使用openssl库进行MD5校验
- 创建线程的三种方法_Netty源码分析系列之NioEventLoop的创建与启动
- 聋人工学院计算机老师,聋人工学院12位手语老师用双手传递声音
- JavaScript验证表单数据,HTML自动验证表单数据是否为空,数字范围
- 分水岭算法 matlab实现
- MySQL8中文手册【持续更新】
- [经验教程]iPhone苹果手机电池健康度怎么查询及如何更换苹果iPhone手机电池恢复健康度到100%?
- 亮度对比度色调饱和度最佳_数码教程丨如何仿电影胶片色调与质感?
- 华为RH5885H V3服务器采集日志
- 大数据商机VS个人隐私 车联网的攻与守
- TiggerRamDisk的超详细使用教程(亲测成功)
- 强迫症患者之黑苹果优化(启动画面、CPU重命名、显示真实主板、开启12代CPU全核心)
- unity制作坦克大战
热门文章
- 构建Java Web应用程序时遵循MVC的三个步骤
- 将Spring集成到旧版应用程序中
- Spring远程支持和开发RMI服务
- 使用Spring Data Neo4j进行领域建模
- 道路交通安全违法行为记分管理办法的重大调整(2022版)
- QPW 点评点赞日志表(tf_appraise_praise)
- Sublime Text for Windows的快捷键
- shell开启飞行模式_今天才知道,原来手机的飞行模式用处那么多,看完涨知识了...
- 大型程序是如何开发的_大型小程序如何研发提效
- 【FFMPEG源码终极解析】 avformat_open_input (一)