Canvas线条花环
时间:2022-07-26
本文章向大家介绍Canvas线条花环,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
可喜可贺!庆祝电脑起死回生,庆祝一天好过一天。深夜给电脑安装了开发插件,第二天莫名死机,问了好多人都说主板坏掉了,需要重装系统。我先是对着 宾夕法尼亚大学 的方向拜了拜,又是一番操作,终于唤醒了老伙计度假的心。 写一个Canvas 动画送给你们,十五的月亮十六圆,多给家人一些陪伴。
今晚我会出一期Canvas 动画详细教程,如果你欣赏我的动画,我将不胜感激。 请看源码:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Canvas 网状花环</title>
<style>
html, body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas" width="100%" height="100%">
</body>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
var mouseX = 0;
var mouseY = 0;
var a = 0.2;
var t = 0;
var aStep = Math.PI * 0.01;
var globalHue = 0;
init();
function init() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("mousemove", e => {
mouseX = e.clientX;
mouseY = e.clientY;
});
update();
}
function update() {
requestAnimationFrame(update);
var time = performance.now() / 60;
// do stuff here
a = Math.sin(2 - time * 0.0001);
t = Math.sin(2 + time * 0.03);
//aStep = (Math.sin(time * 0.01) + 1.5) * 0.25
aStep = Math.PI * (0.375 + Math.sin(time * 0.001) * 0.125);
globalHue += 10;
draw();
}
function draw() {
// clear canvas
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// line
var cx = window.innerWidth / 2;
var cy = window.innerHeight / 2;
var x, y, px, py;
var radius = 0,pradius = 0;
var totalAngle = Math.PI * 200;
for (var theta = 0; theta < totalAngle; theta += aStep) {
pradius = radius;
radius = (t + Math.pow(2, Math.cos(theta * a))) * 200;
px = x;
py = y;
x = cx + Math.cos(theta) * radius;
y = cy + Math.sin(theta) * radius;
if (theta > 0) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(px, py);
var dx = x - px;
var dy = y - py;
var lineSize = Math.sqrt(dx * dx + dy * dy);
var r = pradius + (radius - pradius) / 2;
var hue = globalHue + theta / Math.PI * 180;
ctx.strokeStyle = "hsl(" + hue + ", 100%, 50%)";
//ctx.lineWidth=clamp(map(r, -200, 200, 0.25, 2), 0.25, 10);
ctx.lineWidth = .5;
ctx.stroke();
ctx.closePath();
}
}
}
function map(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
}
function clamp(value, min, max) {
return value < min ? min : value > max ? max : value;
}
</script>
</html>
无论是Canvas 还是别的,前端的学习总是妙趣横生,只要思想在不断进步,技术就会一次次的突破。如果你学习过Canvas ,你会更加了解这段代码的神奇,送给你,远道而来的求学者。
- 【翻译】在Visual Studio中使用Asp.Net Core MVC创建第一个Web Api应用(二)
- 微信快速开发框架(一)-- 对微信公众平台开发的消息处理
- 微信快速开发框架(二) -- 快速开发微信公众平台框架---简介
- LayoutInflater 布局渲染工具原理分析
- 使用Keras在训练深度学习模型时监控性能指标
- 微信快速开发框架(四)-- 体验微信公众平台快速开发框架
- AsyncTask源码解析
- 微信快速开发框架(五)-- 利用快速开发框架,快速搭建微信浏览博客园首页文章
- 对于小批量梯度下降以及如何配置批量大小的入门级介绍
- 数据结构之二叉树
- 微信快速开发框架(六)-- 微信快速开发框架(WXPP QuickFramework)V2.0版本上线--源码已更新至github
- 数据结构之数组
- Android资源动态加载以及相关原理分析
- 微信快速开发框架(七)--发送客服信息,版本更新至V2.2 代码已更新至github
- 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 数组属性和方法
- 0793-5.16.2-如何迁移单个Zookeeper实例
- 来了来了!Docker安装及运行原理
- 学习 | Node.js 之定时任务
- HTML标记语言学习笔记
- 明知 | TypeScript 结合 egg.js 基本使用
- 入门 | egg.js 入门之egg-jwt
- 3大利器推荐,帮你写出规范漂亮的python代码
- 【Docker】修改docker镜像存储的路径
- conda报错
- docker安装和使用
- JAVA-常量及常量池
- 解决哈希冲突的常用方法分析
- 03 Confluent_Kafka权威指南 第三章: Kafka 生产者:向kafka写消息
- kafka生产者和消费者的基本操作
- 05 Confluent_Kafka权威指南 第五章: kafka内部实现原理