HTML5/Canvas交互式漂浮三角形动画背景

鼠标悬停会高亮选中的三角形区域。可用于网页动画背景。

html5, triangle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4411
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var Triangle = function(params) {
    this.position = params.position || {
        x: 0,
        y: 0
    };
    this.rotation = params.rotation || 0;
    this.color = params.color ||  '255,255,255';
    this.currentRadius = params.radius ||  20;
    this.targetRadius = params.radius ||  20;
    this._radius = params.radius ||  20;
    this.fillOpacity = params.opacity || 0;
    this.targetOpacity = 0;
    this.currentOpacity = 0;
    this.isRotating = false;
}

Triangle.prototype.getPointsFromPosition = function() {
    var xoffset = Math.cos(Math.PI / 6) * this.currentRadius;
    var yoffset = Math.sin(Math.PI / 6) * this.currentRadius;

return [{
        x: this.position.x,
        y: this.position.y - this.currentRadius
    }, {
        x: this.position.x + xoffset,
        y: this.position.y + yoffset
    }, {
        x: this.position.x - xoffset,
        y: this.position.y + yoffset
    }]
}

Triangle.prototype.rotate = function(cx, cy, x, y, angle) {
    var radians = (Math.PI / 180) * angle,
        cos = Math.cos(radians),
        sin = Math.sin(radians),
        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return {
        x: nx,
        y: ny
    };
}

Triangle.prototype.update = function() {
    // Get Points
    this.points = this.getPointsFromPosition();

// Transform points with rotation
    var rotatePoints = [];
    _.forEach(this.points, (point) => {
        rotatePoints.push(this.rotate(this.position.x, this.position.y, point.x, point.y, this.rotation));
    });
    this.points = rotatePoints;

// Opacity
    this.currentOpacity = this.currentOpacity + (this.targetOpacity - this.currentOpacity) * 0.05;

// Radius 
    this.currentRadius = this.currentRadius + (this.targetRadius - this.currentRadius) * 0.05;
    // Rotation
    this.isRotating ? this.rotation += 0.5 : this.rotation -= Math.random() * 0.1;

// Draw
    context.save();

//context.translate( this.position.x, this.position.y );
    //context.rotate( this.rotation * Math.PI / 180 );
    //context.translate( -this.position.x, -this.position.y );

context.strokeStyle = "rgba(" + this.color + ",1)";
    context.fillStyle = "rgba(" + this.color + "," + this.currentOpacity + ")";
    context.beginPath();
    context.moveTo(this.points[0].x, this.points[0].y);
    context.lineTo(this.points[1].x, this.points[1].y);
    context.lineTo(this.points[2].x, this.points[2].y);
    context.closePath();
    context.stroke();
    context.fill();

context.restore();
}

let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
let container = document.getElementById('container');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
container.appendChild(canvas);
var displayObjects = [];

setup();
var pointInPolygon = function(poly, point) {
    var i, j = poly.length - 1;
    var oddNodes = false;

for (i = 0; i < poly.length; i++) {
        if ((poly[i].y < point.y && poly[j].y >= point.y || poly[j].y < point.y && poly[i].y >= point.y) && (poly[i].x <= point.x || poly[j].x <= point.x)) {
            oddNodes ^= (poly[i].x + (point.y - poly[i].y) / (poly[j].y - poly[i].y) * (poly[j].x - poly[i].x) < point.x);
        }
        j = i;
    }
    return oddNodes;
}

var resize = function() {
    displayObjects = [];
    setup();
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

window.addEventListener('mousemove', mouseListener);
window.addEventListener('resize', resize);

编译

CSS

HTML

鼠标悬停会高亮选中的三角形区域。可用于网页动画背景。

html5, triangle

编辑器支持Emmet

快捷键

鼠标悬停会高亮选中的三角形区域。可用于网页动画背景。

html5, triangle

HTML5 Canvas交互式星辰网页动画背景

HTML5 Canvas三角形网格组成的球体在水面颠簸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：