html创建scrpts方法,HTML5 Canvas口香糖/粘稠球/软面团
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
const el = document.getElementById('canvas');
const ctx = el.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const pi = Math.PI;
const points = 12;
const radius = 200 * dpr;
const h = 600 * dpr;
const w = 600 * dpr;
const center = {
x: w / 2 * dpr,
y: h / 2 * dpr
};
const circles = [];
const rangeMin = 1;
const rangeMax = 30;
const showPoints = true;
let mouseY = 0;
let tick = 0;
const gradient1 = ctx.createLinearGradient(0, 0, w, 0);
gradient1.addColorStop(0, '#96fbc4');
gradient1.addColorStop(1, '#f9f586');
const gradient2 = ctx.createLinearGradient(0, 0, w, 0);
gradient2.addColorStop(0, '#48c6ef');
gradient2.addColorStop(1, '#6f86d6');
const gradient3 = ctx.createLinearGradient(0, 0, w, 0);
gradient3.addColorStop(0, '#9795f0');
gradient3.addColorStop(1, '#9be15d');
const gradient4 = ctx.createLinearGradient(0, 0, w, 0);
gradient4.addColorStop(0, '#f6d365');
gradient4.addColorStop(1, '#fda085');
const gradients = [ gradient1, gradient2, gradient3, gradient4 ];
window.addEventListener('mousemove', handleMove, true);
function handleMove(event) {
mouseY = event.clientY;
}
ctx.scale(dpr, dpr);
el.width = w * dpr;
el.height = h * dpr;
el.style.width = w + 'px';
el.style.height = h + 'px';
// Setup swing circle points
for (var idx = 0; idx <= gradients.length - 1; idx++) {
let swingpoints = [];
let radian = 0;
for (var i = 0; i < points; i++){
radian = pi * 2 / points * i;
var ptX = center.x + radius * Math.cos(radian);
var ptY = center.y + radius * Math.sin(radian);
swingpoints.push({
x: ptX,
y: ptY,
radian: radian,
range: random(rangeMin, rangeMax),
phase: 0
});
}
circles.push(swingpoints);
}
// --------------------------------------------------------------------------- //
// swingCircle
function swingCircle() {
ctx.clearRect(0, 0, w * dpr, h * dpr);
ctx.globalAlpha = 1;
// ctx.globalCompositeOperation = 'source-over';
ctx.globalCompositeOperation = 'screen';
for (let k = 0; k < circles.length; k++) {
let swingpoints = circles[k];
for (var i = 0; i < swingpoints.length; i++){
swingpoints[i].phase += random(1, 10) * -0.01;
let phase = 4 * Math.sin(tick / 65);
if (mouseY !== 0) {
phase = mouseY / 200 + 1;
}
var r = radius + (swingpoints[i].range * phase * Math.sin(swingpoints[i].phase)) - rangeMax;
swingpoints[i].radian += pi / 360;
var ptX = center.x + r * Math.cos(swingpoints[i].radian);
var ptY = center.y + r * Math.sin(swingpoints[i].radian);
if (showPoints === true) {
ctx.strokeStyle = '#96fbc4';
ctx.beginPath();
ctx.arc(ptX, ptY, 2 * dpr, 0, pi * 2, true);
ctx.closePath();
ctx.stroke();
}
swingpoints[i] = {
x: ptX,
y: ptY,
radian: swingpoints[i].radian,
range: swingpoints[i].range,
phase: swingpoints[i].phase,
};
}
const fill = gradients[k];
drawCurve(swingpoints, fill);
}
tick++;
requestAnimationFrame(swingCircle);
}
requestAnimationFrame(swingCircle);
// --------------------------------------------------------------------------- //
// drawCurve
function drawCurve(pts, fillStyle) {
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.moveTo(
(pts[cycle( - 1, points)].x + pts[0].x) / 2,
(pts[cycle( - 1, points)].y + pts[0].y) / 2);
for (var i = 0; i < pts.length; i++){
ctx.quadraticCurveTo(
pts[i].x,
pts[i].y,
(pts[i].x + pts[cycle(i + 1, points)].x) / 2,
(pts[i].y + pts[cycle(i + 1, points)].y) / 2);
}
ctx.closePath();
ctx.fill();
}
// --------------------------------------------------------------------------- //
// cycle
function cycle( num1, num2 ) {
return ( num1 % num2 + num2 ) % num2;
}
// --------------------------------------------------------------------------- //
// random
function random (num1, num2) {
var max = Math.max(num1, num2);
var min = Math.min(num1, num2);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// --------------------------------------------------------------------------- //
// rotate
// function rotate (x, y, angle) {
// var radians = (pi / 180) * angle,
// cos = Math.cos(radians),
// sin = Math.sin(radians),
// nx = (cos * (x - center.x)) + (sin * (y - center.y)) + center.x,
// ny = (cos * (y - center.y)) - (sin * (x - center.x)) + center.y;
// return { x: nx, y: ny };
// }
html创建scrpts方法,HTML5 Canvas口香糖/粘稠球/软面团相关推荐
- 在html5绘制直线的两个方法,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: v ...
- html5选择状态,HTML5 Canvas 状态
HTML5 Canvas 状态 我们在canvas上绘制图形的时候,经常需要通过save()和restore()改变2D上下文的状态.举例来说,你在绘制直线或矩形的时候需要一种strokStyle,在 ...
- html5 canvas 图片移动端,支持移动端的HTML5 Canvas逼真黑板特效
插件描述:这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动端,它能模拟使用粉笔在黑板上写字的效果. 这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动 ...
- 用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法 发布时间:2020-08-29 11:24:23 来源:亿速云 阅读:96 作者:小新 这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
- 提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2D immediate mode graphic)的标准.许多开发者现在 ...
- html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法 发布时间:2020-08-29 11:23:12 来源:亿速云 阅读:102 作者:小新 这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
- 用HTML5 Canvas为Web图形创建特效
HTML5 Canvas 将使用像素在屏幕上绘制图形图像. 本节演示了五种用于操作像素以创建摄影特效的 Canvas 技术. 您可使用这些技术来生成独具特色的图像,为您的网站.博客.视频游戏画面.广告 ...
- html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- HTML5 canvas 游戏设计:创建一个经典的魔塔游戏
整个项目都已经开源,项目地址:https://github.com/m8705/MAGIC-TOWER-JS 注:这是我高中时候的作品,BUG 很多,已经不再更新了.下载项目到本地就能玩. 前言 魔塔 ...
最新文章
- 【opencv】(8) 傅里叶变换,高通低通滤波器
- ASP.NET返回上一页面的实现方法
- Ubuntu 下获得root权限
- javascript之执行上下文堆栈
- .net c# 序列化和反序列
- 服务器推送信息到客户端,服务器如何发送消息到客户端
- 我作为开发者犯过的两次愚蠢的错误
- thinkphp5模拟post请求_Thinkphp5.1模拟登录并提交form表单
- boost::hana::tuple_t用法的测试程序
- 六大设计原则之迪米特法则
- RxSwift之UI控件UISlider与UIStepper扩展的使用
- 前端进阶 -css的弱化与js的强化(11)
- How Kyma plugin register hook to Activate and deactivate event
- maven插件编写_编写Maven插件的提示
- C++设计模式-采用装饰模式用户和管理员加载不同的模块(Qt框架实现)
- vue项目查看构建后项目报告,项目个模块依赖占比比例情况
- 波斯语网站步百度后尘糟伊朗网军出击
- 安全上下文以及FACL
- python pywinauto 自动控制微信, 关键字回复、收款、定时任务, 代替人工成为微信客服
- 统计项目代码行数的工具——SLOCCount
热门文章
- oralce创建用户
- Hibernate 集合映射
- 「雅礼集训 2017 Day5」珠宝
- 基于Spring boot + Mybatis +Netty 实现前后端分离的聊天App,部署到阿里云线上服务器...
- windows远程连接报错--“发生身份验证错误。要求的函数不受支持”
- Gartner:2016年全球IoT安全开支将达到3.48亿美元
- 二、StreamAPI
- Qt编写OpenMP程序--HelloWorld
- WindDbug应用
- 为Liferay Server分配Perm,Heap Size