html5 canvas 图片变形,HTML5/Canvas 流动的变形圆形
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
/**
* inspired by:
* Rectangle World
* http://rectangleworld.com/blog/archives/462
*/
// http://stackoverflow.com/a/5624139/5930258
const hexToRgb = (hex) => {
let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => {
return r + r + g + g + b + b;
});
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
}
const canvas = document.querySelector('.mycanvas');
const ctx = canvas.getContext('2d');
let winWidth;
let winHeight;
let midX;
let midY;
let tick;
let rafId;
class Circle {
constructor(options) {
this.assign(options);
return this;
}
create() {
this.points = [];
this.radius = (this.grow) ? 0 : this.radius;
let angle = 0;
let step = (Math.PI * 2) / this.segments;
for (let i = 0; i < this.segments; i++) {
let x = this.x + (Math.cos(angle) * this.radius);
let y = this.y + (Math.sin(angle) * this.radius);
this.points.push({
x, y, angle
});
angle += step;
}
return this;
}
update(x, y, endX) {
this.x = x;
this.y = y;
if (this.grow) {
this.radius = Math.max(0, this.maxRadius * (x / endX));
}
}
updatePoint(p, tick, baseX, baseY) {
p.x = Math.cos(p.angle);
p.y = Math.sin(p.angle);
let smoothness = 1;
let nx = p.x * smoothness;
let ny = p.x * smoothness; // x intentionally
let radius = this.radius + this.getNoise(tick + nx, tick + ny);
p.x *= radius;
p.y *= radius;
p.x += baseX;
p.y += baseY;
}
getNoise(a, b) {
const max = this.radius * 1.5;
const n = noise.perlin2(a, b);
// map between -1, 1
return (n + 1) * (max + max) / 2 - max;
}
assign(options) {
Object.assign(this, options);
this.maxRadius = this.radius;
this.reset();
}
reset() {
this.create();
}
// when setting a rgb value ([r, g, b]) directly in dat.ui, it sometimes returns a hex
// so, input a hex by default and convert it manually to rgb
set color1(c1) {
let rgb = hexToRgb(c1).join(', ');
this._color1 = c1;
this.rgb1 = `rgba(${rgb}, ${this.alpha})`;
}
set color2(c2) {
let rgb = hexToRgb(c2).join(', ');
this._color2 = c2;
this.rgb2 = `rgba(${rgb}, ${this.alpha})`;
}
get color1() {
return this._color1;
}
get color2() {
return this._color2;
}
get rgba1() {
return this.rgb1;
}
get rgba2() {
return this.rgb2;
}
}
const assignColors = () => {
circle.color1 = options.color1;
circle.color2 = options.color2;
circle.alpha = options.alpha;
}
const setupStage = () => {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
midX = winWidth >> 1;
midY = winHeight >> 1;
tick = performance.now();
ctx.clearRect(0, 0, winWidth, winHeight);
ctx.canvas.width = winWidth;
ctx.canvas.height = winHeight;
}
const redraw = () => {
setupStage();
circle.assign(options);
}
const loop = () => {
tick += options.randomness;
circle.update(circle.x + 1.5, midY + ((midY / 2) * noise.perlin2(tick * 0.75, tick)), winWidth);
let currX = circle.x;
let currY = circle.y;
let grad = ctx.createLinearGradient(-circle.radius, currY, circle.radius, currY);
grad.addColorStop(0, circle.rgba1);
grad.addColorStop(1, circle.rgba2);
ctx.strokeStyle = grad;
ctx.lineWidth = options.lineWidth;
ctx.save();
ctx.translate(currX, currY);
circle.points.forEach((point, index) => {
ctx.beginPath();
ctx.moveTo(point.x - currX, point.y - currY);
circle.updatePoint(point, tick, currX, currY);
ctx.lineTo(point.x - currX, point.y - currY);
ctx.stroke();
ctx.closePath();
});
ctx.restore();
rafId = requestAnimationFrame(loop);
}
window.addEventListener('resize', redraw);
setupStage();
let options = {
segments: 1000,
radius: 150,
x: -100,
y: midY,
grow: false,
radius: 130,
color1: '#d2205e',
color2: '#29cafc',
alpha: 0.1,
randomness: 0.005,
lineWidth: 1.01
};
let circle = new Circle(options);
noise.seed(Math.random());
redraw();
loop();
let gui = new dat.GUI();
let folderColor = gui.addFolder('Appearance');
let folderSettings = gui.addFolder('Circle settings');
folderColor.addColor(options, 'color1').onChange(assignColors);
folderColor.addColor(options, 'color2').onChange(assignColors);
folderColor.add(options, 'alpha').step(0.001).min(0.01).max(1).onChange(assignColors);
folderColor.add(options, 'lineWidth').step(0.01).min(1.01).max(5);
folderSettings.add(options, 'segments', 100, 1500).step(1).onFinishChange(redraw);
folderSettings.add(options, 'grow').onFinishChange(redraw);
gui.add({
redraw
}, 'redraw');
folderColor.open();
gui.close();
html5 canvas 图片变形,HTML5/Canvas 流动的变形圆形相关推荐
- html5中图片热点,HTML5 创建热点图
通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高. 下面是HTML部分: #heatmap{background-image:url("ma ...
- uni保存canvas图片_UniApp 用canvas生成图片保存本地
第一步:先定义一个canvas标签,如下. 第二步:获取图片在view中的高度和宽度,uni获取高度和宽度的方法,如下. let view = uni.createSelectorQuery().in ...
- vue上传图片加水印;js上传图片添加水印;vue给图片添加水印;canvas图片添加水印;canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇 需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...
- HTML5绝对定位图片合成,HTML5 绝对定位的问题
HTML5 布局之路 - 表单实例 .wrap { width:300px; height:100px; padding:12px; border:1px solid #933; } .user, . ...
- HTML5隐藏图片代码,HTML5终极备忘大全(图片版+文字版)
一.前言兼图片备忘 下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示). 但是,上面毕竟是图片格式(原图上兆 ...
- html5页面图片切换,HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- html5 jq图片效果,HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面
CSS 语言: CSSSCSS 确定 /*CLEARFIX*/ body{margin: 0;} .clearfix:after { content: "."; display: ...
- html5怎么修改图片大小,HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.wid ...
- html5 canvas 图片移动端,支持移动端的HTML5 Canvas逼真黑板特效
插件描述:这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动端,它能模拟使用粉笔在黑板上写字的效果. 这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动 ...
最新文章
- python入门教程非常详细-python初学者怎么入门:python入门教程非常详细
- 全球及中国再生锌市场前景分析与竞争策略研究报告2022版
- Android开发笔记(十六)秋千摇摆动画SwingAnimation
- Android开发者应该深入学习的10个开源应用项目[转]
- Log4j2 Zero Day 漏洞 Apache Flink 应对指南(二)
- 惠州物联网产业规模 明年争取达400亿元
- matlab温室,科学网—用MATLAB建立中国部门温室气体排放的关联模型 - 计军平的博文...
- Spring源码分析-从@ComponentScan注解配置包扫描路径到IoC容器中的BeanDefinition,经历了什么(一)?
- 莫烦 python教程学习笔记————搭建自己的神经网络
- win10 企业版 2016长期服务版激活方法
- pla3d打印材料密度_FDM 3D打印机最常用的耗材PLA的密度 创想三维
- rgb转换 css 字体
- 双足机器人课设报告_双足竞步机器人-智能步行者设计-技术报告
- android中setClickable,setEnabled,setFocusable的含义及区别
- 量子计算机和量子纠缠的关系,“量子纠缠”是个什么鬼?竟然震惊了全球!
- 通过matlab将二维图片序列进行三维立体重建(包含仿真录像)
- form layui vue 和_vue和layui一起用好用吗?
- 图形学实验零 读取三角网格并交互
- 《营销管理必读12篇》读书小记
- 微信支付V3 生成平台证书