JS实现Canvas中图片淡出效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>实现Canvas内地图片淡出效果</title><style>body {background: #eee;}#canvas {background: #fff;cursor: pointer;margin-left: 20px;margin-top: 50px;box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);}#controls {position: absolute;top: 20px;left: 50px;}</style>
</head><body><div id="controls"><input type="button" id="fadeBtn" value="点击按钮淡出图片" /></div><canvas id="canvas" width="800" height="520"></canvas>
</body>
<script>var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var fadeBtn = document.getElementById('fadeBtn');var originalImageData = null; //保存最初的图像数据var interval = null; //定时器var onOff = true;//初始化var image = new Image();image.src = 'star.png';image.onload = function () {drawOriginalImage();originalImageData = context.getImageData(0, 0, canvas.width, canvas.height);}//事件fadeBtn.onclick = function () {if (onOff) {onOff = false;fadeOut(context, context.getImageData(0, 0, canvas.width, canvas.height), 0, 0, 20, 1000 / 60);}}//绘制原图function drawOriginalImage() {context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);}//淡出动画function fadeOut(context, imageData, x, y, steps, millisecondsPerStep) {var frame = 0;var length = imageData.data.length;interval = setInterval(function () {frame++;if (frame > steps) {clearInterval(interval);animationComplete();} else {increaseTransperency(imageData, steps);context.putImageData(imageData, x, y);}}, millisecondsPerStep);}//每帧升高的透明度function increaseTransperency(imageData, steps) {var alpha;var currentAlpha;var alphaStep;var length = imageData.data.length;for (var i = 3; i < length; i += 4) {alpha = originalImageData.data[i]; //最初的透明度if (alpha > 0 && imageData.data[i] > 0) { //最初透明度及现在的透明度都不为0时currentAlpha = imageData.data[i];alphaStep = Math.ceil(alpha / steps);if (currentAlpha - alphaStep > 0) { //直至最接近于0imageData.data[i] -= alphaStep;} else { //最后等于0imageData.data[i] = 0;}}}}//结束后function animationComplete() {setTimeout(function () {drawOriginalImage();onOff = true;}, 1000)}
</script></html>

JS实现Canvas中图片淡出效果_艾孜尔江撰相关推荐

Unity中退出的方法_艾孜尔江撰
void Quit(){#if UNITY_EDITORUnityEditor.EditorApplication.isPlaying = false; #elseApplication.Quit ( ...
JavaScript实现令人放松的小游戏_艾孜尔江撰
<html><head><!-- 由艾孜尔江·艾尔斯兰复现,转载或使用请注意标明出处.全程均使用鼠标交互,原游戏创作者不详,复现时有改动.使用时请在本地路径下放置一张玩家 ...
用JavaScript实现贪吃蛇游戏_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>J ...
JavaScript实现打砖块游戏_艾孜尔江撰
<!DOCTYPE html> <html> <head><m ...
C++图书管理系统_艾孜尔江撰
#include<iostream> #include<conio.h> //控制台数据输入输出的函数 #include<fstream>//文件流 #includ ...
从0开始配置云服务器开发环境_艾孜尔江撰
选择云服务器系统为Cent OS最新版本或根据自己的需求选择稳定版本,并在完成部署之后从本地通过在终端中输入 ssh root@YourIPAdress 登录到服务器上,如果出现 ssh连接时提示TH ...
点与平面的距离特征_艾孜尔江撰
点到平面距离公式 distance = Ax + By + Cz + D; //点P(x,y,z),平面的法向量n=(A,B,C),D是距原点的距离. 其中n = (A, B, C)是平面的法向量,D ...
在Cent OS云服务器上部署基于TP5后端代码踩坑记录_艾孜尔江撰
推荐使用镜像安装Cent OS系统,或者在纯净安装完成之后在完成Apache+MySQL+PHP的时候不要每个单独安装,因为这样会出一些三者之间版本不配的问题,网上各种说法都有,查起来也非常困难,版本 ...
SVN常用命令集合_艾孜尔江撰
在平时的工作中我们大多数情况下喜欢使用Tortoise SVN之类的可视化版本控制工具,但笔者发现,命令行的方式进行版本控制在执行速度上将会更快一些.尽管在大多数情况下使用命令行并不是很方便,但只要用 ...

JS实现Canvas中图片淡出效果_艾孜尔江撰

JS实现Canvas中图片淡出效果_艾孜尔江撰相关推荐

最新文章

热门文章