html canvas 遮罩,使用Canvas为文本添加遮罩特效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas,

ctx,

screenWidth = 500,

screenHeight = 500,

triangles = [],

colors = ['#FBE9E7', '#FFCCBC', '#FFAB91', '#FF8A65', '#FF7043', '#FF5722', '#F4511E', '#E64A19', '#D84315', '#BF360C'],

numTriangles = 100,

nextX = screenWidth / 2,

nextY = screenHeight / 2,

text = 'A',

fontSize = 512,

framesToSkip = 2,

counter = 0,

time = +new Date;

function randomNum(max) {

return Math.round(Math.random() * max); //

}

for (var i = numTriangles; i > 0; i--) {

var x = randomNum(screenWidth),

y = randomNum(screenHeight),

width = randomNum(200),

height = randomNum(200),

rotation = randomNum(400),

direction = Math.random() < 0.5 ? -1 : 1;

triangles[i] = {

x: x,

y: y,

width: width,

height: height,

direction: direction,

rotation: rotation

};

}

window.requestAnimFrame =

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

function drawTriangle(x, y, width, height, direction, rotation, i) {

var ctx = canvas.getContext('2d'),

path = new Path2D(),

angle = 180 - rotation,

aX = x + (width + rotation) * -direction,

aY = y + height - rotation,

bX = x + (width + (rotation / 2)) * -direction,

bY = y - height - (rotation / 2),

modifier = 0;

if (i % 6 === 0) {

aX += modifier;

bY += modifier;

}

path.moveTo(nextX, nextY);

path.lineTo(aX, aY);

path.lineTo(bX, bY);

ctx.fillStyle = colors[i % colors.length];

ctx.fill(path);

nextX = bX;

nextY = bY;

}

function drawText() {

ctx.globalCompositeOperation = 'exclusion';

ctx.font = 'bold ' + fontSize + 'px sans-serif';

ctx.fillStyle = '#fff';

var x = screenWidth / 2 - (fontSize / 3),

y = screenHeight / 2 + (fontSize / 3);

ctx.fillText(text, x, y);

}

function updatePixels() {

var imageData = ctx.getImageData(0, 0, screenWidth, screenHeight);

var data = imageData.data;

for (var y = 0; y < screenHeight; ++y) {

for (var x = 0; x < screenWidth; ++x) {

var index = (y * screenWidth + x) * 4;

var value = data[index + 4],

modifier = 0;

// if (time % Math.floor(Math.cos(time) * 1000) === 0) {

modifier = Math.floor(Math.sin(time) * screenWidth);

//}

data[index] = data[index + modifier]; // red

data[index + screenWidth * 4] = data[index + modifier]

data[++index + screenWidth * 3] = data[index]; // green

data[++index] = data[index]; // blue

data[++index] = 255; //

}

}

ctx.putImageData(imageData, 0, 0);

}

function update() {

if (counter < framesToSkip) {

counter++;

requestAnimFrame(update);

return;

}

ctx.clearRect(0, 0, canvas.width, canvas.height);

var currentX = screenWidth / 2,

currentY = screenHeight / 2,

width = 25,

height = 25,

direction = 1,

t;

ctx.save();

ctx.globalCompositeOperation = 'overlay'

for (var i = triangles.length - 1; i > 0; i--) {

t = triangles[i];

drawTriangle(t.x, t.y, t.width, t.height, t.direction, t.rotation, i);

}

ctx.restore();

drawText();

updatePixels();

counter = 0;

time = +new Date;

requestAnimFrame(update);

}

function start() {

update();

}

window.onload = function() {

canvas = document.getElementById('c');

ctx = canvas.getContext('2d');

canvas.width = screenWidth;

canvas.height = screenHeight;

start();

};