五星红旗下的我们
- 案例名称：五星红旗下的我们
- 案例人员：杨标
- 案例平台：HTML+CSS+JavaScript
- 完成时间：2022年2月16日
效果图
案例说明
本次案例主要使用到的就是canvas这个技术，canvas是HTML5里面的画布，通过这个技术我们可以在网页上面呈现丰富多彩的内容
案例需要一面五星红旗的图片，同时还需要另一个个人的照片（这里我使用的是自己的照片），如下所示
将自己的图片衬在五星红旗的下面，这样就完成了我们的效果图了
本次案例的案成有多种多样的方式，这里我列举常见的三种试
案例代码一
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>red-flag</title>
<style>
#img1 {
border: 1px solid black;
}
#c1 {
border: 1px solid black;
}
</style>
</head>
<body>
<img src="./img/01.png" id="img1" alt="">
<canvas id="c1"></canvas>
</body>
<script>
var img1 = document.querySelector("#img1");
img1.onload = function() {
/** @type{HTMLCanvasElement} */
var c1 = document.querySelector("#c1");
c1.width = img1.width;
c1.height = img1.height;
var ctx = c1.getContext("2d");
var img2 = new Image();
img2.src = "./img/mmexport1632908082978.jpg";
img2.width = img1.width;
img2.height = img1.height;
ctx.drawImage(img1, 0, 0, img1.width, img1.height);
for (var i = 0; i < img1.height; i++) {
var imgData = ctx.getImageData(0, i, img1.width, 1);
var alpha = 255;
for (var j = 0; j < imgData.data.length; j += 4) {
alpha--;
if (alpha < 0) {
alpha = 0;
}
imgData.data[j + 3] = alpha;
}
ctx.putImageData(imgData, 0, i);
}
img2.onload = function() {
ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(img2, 0, 0,img2.width,img2.height);
}
}
</script>
</html>
案例代码二
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>red-flag</title>
<style>
#img1 {
border: 1px solid black;
}
#c1 {
border: 1px solid black;
}
</style>
</head>
<body>
<img src="./img/01.png" id="img1" alt="">
<canvas id="c1"></canvas>
</body>
<script>
var img1 = document.querySelector("#img1");
img1.onload = function() {
/** @type{HTMLCanvasElement} */
var c1 = document.querySelector("#c1");
c1.width = img1.width;
c1.height = img1.height;
var ctx = c1.getContext("2d");
var img2 = new Image();
img2.src = "./img/mmexport1632908082978.jpg";
img2.width = img1.width;
img2.height = img1.height;
ctx.drawImage(img1, 0, 0, img1.width, img1.height);
var imgData = ctx.getImageData(0, 0, img1.width, img1.height);
var alpha = 255;
for (var i = 0; i < imgData.data.length; i += 4) {
alpha--;
imgData.data[i + 3] = alpha;
if ((i + 4) % img1.width == 0) {
alpha = 255;
}
}
ctx.putImageData(imgData, 0, 0);
var base64Str = c1.toDataURL("image/png");
var img_bak = new Image();
img_bak.src = base64Str;
img2.onload=function(){
ctx.drawImage(img2,0,0,img2.width,img2.height);
ctx.drawImage(img_bak,0,0,img_bak.width,img_bak.height);
}
}
</script>
</html>
案例代码三
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业</title>
<style>
#c1 {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c1"></canvas>
</body>
<script>
/** @{HTMLImageElement} */
var img1 = new Image();
img1.src = "./img/01.png";
var img2 = new Image();
img2.src = "./img/mmexport1632908082978.jpg";
img1.onload = function() {
img2.onload = function() {
/** @type{HTMLCanvasElement} */
var c1 = document.querySelector("#c1");
c1.width = img1.width;
c1.height = img1.height;
var ctx = c1.getContext("2d");
// 图片等比的缩放
var percent = img1.width / img2.width;
img2.width = img2.width * percent;
img2.height = img2.height* percent;
ctx.drawImage(img1, 0, 0, img1.width, img1.height);
ctx.globalCompositeOperation = "destination-over";
var i = 0;
var timerId = setInterval(function() {
//由上下向的扫描数据，每次扫描一行（一像素）
var imgData = ctx.getImageData(0, i, img1.width, 1);
var alpha = 255;
for (var j = 0; j < imgData.data.length; j += 4) {
// 改变alphp值
alpha -= 0.7;
if (alpha < 0) {
alpha = 0;
}
imgData.data[j + 3] = parseInt(alpha);
}
ctx.putImageData(imgData, 0, i);
i++;
if (i >= img1.height) {
clearInterval(timerId);
}
ctx.drawImage(img2, 0, 0, img2.width, img2.height);
}, 20);
}
}
</script>
</html>
在当前的这个代码当中，我们使用了定时器，这样会产生一个动画的效果，效果图如下
评论区