html5中ink,html5 canvas绘制墨汁动画特效
特效描述：html5 canvas绘制 墨汁动画特效。html5 canvas绘画点击页面墨汁动画效果
代码结构
1. 引入JS
2. HTML代码
var c = document.getElementById("c"),
ctx = c.getContext("2d"),
cw = (c.width = window.innerWidth),
ch = (c.height = window.innerHeight),
paper = new Image(200,200),
ink = new Image(75,100), // Dimensions of the viewable area, not the entire sprite-sheet
numFrames = 7,
n=0,
data={};
window.addEventListener("load", function(){
window.addEventListener("touchstart", function(e){
e.preventDefault();
setData(e.touches[0].clientX,e.touches[0].clientY);
setTween();
});
window.addEventListener("click", function(e){
setData(e.offsetX,e.offsetY);
setTween();
});
drawBg();
// First run, generate a few drips
for (var i=0; i<5; i++){
setData( cw/2-150+200*Math.random(), ch/2-100+200*Math.random() );
setTween(i/10);
}
});
function setData(inputX,inputY){
(n<3)? n++ : n=0;
data = {
"frame":0,
"x":inputX,
"y":inputY,
"s":75*n,
"scale":.7 + Math.random()*.5,
"rotate": ( Math.random() * Math.PI * 2 )
}
}
function setTween(delay=0){
TweenMax.to(data, .45, {
delay:delay,
frame:numFrames,
ease:SteppedEase.ease.config(numFrames),
onUpdate:run,
onUpdateParams:[data]
})
}
function drawBg (alpha=1){
var pattern = ctx.createPattern(paper, "repeat");
ctx.globalAlpha = alpha;
ctx.fillStyle = pattern;//'#fff';
ctx.fillRect(0, 0, cw, ch);
}
function run ( data ){ // Thank you @Shaw for help with the random scale+rotation - https://codepen.io/shshaw/
ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset the transforms from previous draws
ctx.globalCompositeOperation = "source-atop"; // Fade old drops by redrawing background texture
drawBg(.01); //
ctx.globalAlpha = 1; // Restore globalAlpha that was modified in drawBg()
ctx.translate( data.x, data.y ); // Translate over to the mouse position to center your scaling & rotation on that point
ctx.scale(data.scale, data.scale ); // Randomized scale
ctx.rotate( data.rotate ); // Randomized rotation in radians
ctx.translate( -data.x, -data.y ); // Move back to the starting position
ctx.globalCompositeOperation = ["darken","multiply"][Math.round(Math.random())];
ctx.drawImage( ink, data.s, data.frame*ink.height, ink.width, ink.height, data.x-33, data.y-(ink.height/2), ink.width, ink.height );
}
window.addEventListener("resize", function(){
cw = c.width = window.innerWidth;
ch = c.height = window.innerHeight;
drawBg();
});
paper.src = "img/mask.jpg";
ink.src = "img/mo.png";