Canvas线条动画
时间:2022-07-25
本文章向大家介绍Canvas线条动画,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Canvas线条动画
简单的Canvas动画,代码只有71行,试试吧!没有谁天生就会,用这个动画,做为你的Canvas小结。 如果你觉得我的代码还算有趣,在你的学习中能有所帮助,请查看我的置顶文章,我由衷感谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<title>Document</title>
<style>
body{
background:#000;
overflow:hidden;
margin:0;
}
canvas{
width:45%;
margin:5% 30%;
}
</style>
</head>
<body>
<canvas id="canv" width="600" height="600"></canvas>
</body>
<script>
var c;
var $;
var w = 600;
var h = 600;
constant = 15;
var rad = 300;
var timeout = 0;
c= document.getElementById("canv");
$= c.getContext('2d');
drawLines();
function drawLines(){
$.fillRect(0,0,w,h);
$.translate(w/2,h/2);
for (var i = 0; i < 25; i++) {
for (var n = -45; n <= 45; n+=constant) {
setTimeout("draw("+n+");",100 * timeout);
timeout++;
}
}
}
function draw(n){
$.beginPath();
$.moveTo(0,rad);
var radians = Math.PI/180*n;
var x = (rad * Math.sin(radians)) / Math.sin(Math.PI/2 - radians);
$.lineTo(x,0);
if (Math.abs(n) == 45) {
$.strokeStyle=rndColor();
$.lineWidth=2;
} else if (n == 0) {
$.strokeStyle="rgb(200,200,200)";
$.lineWidth=.5;
} else {
$.strokeStyle="rgb(110,110,110)";
$.lineWidth=.5;
}
$.stroke();
$.rotate((Math.PI/180)*15);
}
function rndColor() {
var r = 255*Math.random()|0,
g = 255*Math.random()|0,
b = 255*Math.random()|0;
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
</script>
</html>
如果你对代码有任何疑问,请在下方?留言,或私信博主,能在前端学习中与你一同进步,是我发表博文的意义。
- Spring Cloud中Feign配置详解
- Spring Cloud中Feign的继承特性
- JavaScript 常用方法总结
- Spring Cloud中声明式服务调用Feign
- Spring Cloud中Hystrix仪表盘与Turbine集群监控
- 轻量级压力测试工具 - AB
- Spring Cloud中Hystrix的请求合并
- Spring Cloud中Hystrix的请求缓存
- mysql主从复制配置
- Spring Cloud系列勘误
- Spring Cloud Stream使用细节
- Redis3 对集群进行重新分片
- Spring Cloud Stream初窥
- jquery事件绑定性能测试
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- BigData-Apache HBase数据库
- Tungsten Fabric知识库丨这里有18个TF补丁程序,建议收藏
- BigData-消息队列框架Apache Kafka入门、原理解析
- BigData--Apache Flume框架
- 【项目实战】DWS 层创建&数据接入
- BigData--Hive数据仓库工具
- 读书笔记——《深入浅出 Webpack》( 送 XMind导图和电子书)
- BigData--MapReduce进阶(二)之工作机制
- BigData--MapReduce进阶(一)之框架原理
- BigData--MapReduce入门
- BigData--分布式流数据流引擎Apache Flink
- 【项目实战】ADS 层数据导出
- 前端大杂货铺系列《七》
- BigData--大数据技术之Spark机器学习库MLLib
- 【LeetCode】三数之和