canvas实现超炫转动银河系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="418" height="436"></canvas>
<script type="text/javascript">"use strict";
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 1400;
// Thanks @jackrugile for the performance tip! http://codepen.io/jackrugile/pen/BjBGoM
// Cache gradient
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width/2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
// End cache
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var Star = function() {
this.orbitRadius = random(w / 2 - 50);
this.radius = random(100, this.orbitRadius) / 10;
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 100000;
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function() {
var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius/2 + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.8;
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();</script>
</body>
</html>
.
相关推荐
在"HTML5+Canvas实现的手绘银河系特效源码.zip"这个压缩包中，我们可以推测包含的是一个使用HTML5和Canvas API开发的交互式银河系特效项目。这个特效可能包括模拟星系旋转、星星闪烁、星云流动等宇宙景象，为用户...
创建银河系动画的第一步是设置画布的基本属性，例如宽度和高度，这可以通过JavaScript的`canvas.width`和`canvas.height`属性来设定。接着，我们需要创建一个渲染循环，这通常通过`requestAnimationFrame`函数来实现...
这个特效是利用Canvas API实现的“html5 canvas炫酷旋转银河系星空背景特效”，它为网站添加了一个动态且引人入胜的视觉元素。 首先，让我们深入了解一下HTML5 Canvas的基本概念。Canvas是一个基于矢量图形的画布，...
这个"HTML5 Canvas绘制银河系特效.zip"文件包含了一个利用Canvas API创建动态银河系场景的实例。下面将详细介绍如何使用HTML5 Canvas来实现这样的特效以及相关的编程知识。 首先，要创建一个银河系特效，我们需要在...
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
在这个项目中，“HTML5+Canvas实现的超炫粒子效果文字动画特效源码”是一个利用这两种技术来创建独特视觉体验的实例。下面将详细讲解这个特效背后的原理和实现方法。 首先，HTML5是下一代超文本标记语言，它扩展了...
HTML5 Canvas实现的全屏银河背景动画特效源码.zip
在本主题中，我们将深入探讨如何使用CSS3和Canvas来实现图片的模糊效果，特别是在Canvas上进行交互设计时如何应用模糊特效。 首先，CSS3已经提供了`filter`属性来实现元素的模糊效果。通过`filter: blur(x)`，我们...
基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于...
使用Canvas的`createLinearGradient`或`createRadialGradient`创建渐变，可以模拟银河系中明亮与暗淡的过渡： ```javascript var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); ...
在银河系特效的例子中，开发者可能使用了Canvas的fillStyle、strokeStyle、beginPath、moveTo、lineTo、arc等方法来描绘星星、星系和背景。 银河系的模拟通常涉及以下几个关键知识点： 1. **坐标系统**：Canvas有...
"HTML5 Canvas鼠标绘制银河系特效"是一个利用Canvas API实现的交互式视觉效果，用户可以通过鼠标操作来展现一个模拟的银河系动态画面。这个特效通常用于网站背景或者游戏设计，可以提升用户体验，增加视觉吸引力。 ...
"canvas实现涂鸦效果"这个主题涉及到的是如何利用Canvas API来创建一个具有涂鸦功能的画板应用。下面将详细讲解实现这一功能所涉及的关键知识点。 1. **Canvas API基础**： - `canvas`元素：HTML5中的`<canvas>`...
好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码： 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var c
微信小程序源码 小程序完整demo：飞翔的小鸟：canvas实现，java后端(适用1221)(学习版)微信小程序源码 小程序完整demo：飞翔的小鸟：canvas实现，java后端(适用1221)(学习版)微信小程序源码 小程序完整demo：飞翔的...
基于canvas的鼠标绘制矩形框的demo，多个canvas对象下支持选中，平移，删除操作，代码用VUE实现的
这篇内容将深入讲解如何在微信小程序的canvas环境中实现文字的缩放功能。 首先，我们要理解微信小程序中的canvas API。在小程序中，我们可以使用`wx.createCanvasContext`方法来获取canvas的绘图上下文对象，这个...
微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现...
原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理，以下是详细解析： 1. Canvas API基础知识 - Canvas元素：HTML5新增的Canvas...
在这个“html5 canvas炫酷旋转银河系星空背景特效源码”中，我们将探讨如何利用Canvas API来实现银河系星空背景的动态旋转效果。 首先，Canvas API是一个基于矢量图形的绘图环境，开发者可以使用JavaScript语言来...