HTML5利用Canvas模拟上下扫描动画实现

最新推荐文章于 2024-08-19 11:01:44 发布

mutu_du

最新推荐文章于 2024-08-19 11:01:44 发布

阅读量4.9k

点赞数

本文链接：https://blog.csdn.net/d_x_program/article/details/77982197

版权

本文介绍了一种使用HTML5 Canvas实现的动态视觉效果。通过两个重叠的Canvas元素，一个作为背景显示图片，另一个用于绘制动态线条。利用JavaScript控制线条的位置变化，形成独特的动画效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<canvas id="backcanvas" width="200px" height="100px" style="position:fixed;top:0px;left:0px;"></canvas>
<canvas id="frontcanvas" width="200px" height="100px" style="position:fixed;top:0px;left:0px;"></canvas>
<script>
var interval,frontCanvas,backCanvas,frontCtx,backCtx,img;
var yFrontPosition = 0,step = 2,canvasWidth,canvasHeight;
var canvasX = 0,canvasY=0;

window.onload = function(){
initPageEle();
drawImg();
startrun();
}
function drawImg(){
img=new Image();
img.src = "Tulips.jpg";
img.onload = loadImg;
}
function initPageEle(){
frontcanvas = document.getElementById("frontcanvas");
backCanvas = document.getElementById("backcanvas");
frontCtx = frontcanvas.getContext("2d");
backCtx = backCanvas.getContext("2d");
canvasWidth = backCanvas.width ;
canvasHeight = backCanvas.height;
backCtx.fillStyle = 'rgba(255, 255, 255, 0)';
backCtx.strokeStyle = "#24303a";
backCtx.lineWidth = 2;
frontCtx.fillStyle = 'rgba(255, 255, 255, 0)';
frontCtx.strokeStyle = "white";
frontCtx.lineWidth = 2;
}
function loadImg(){
backCtx.drawImage(img,0,0,canvasWidth,canvasHeight);
drawBackground();
}
function startrun(){
interval = setInterval(draw,100);
}
function draw(){
drawFront();
}
function drawFront(){
yFrontPosition = yFrontPosition+step;
frontCtx.fillRect(canvasX,canvasY,canvasWidth,canvasHeight);
frontCtx.clearRect(canvasX,canvasY,canvasWidth,canvasHeight);
frontCtx.beginPath();
frontCtx.moveTo(canvasX,yFrontPosition);
frontCtx.lineTo(canvasWidth,yFrontPosition);
frontCtx.stroke();
frontCtx.closePath();
if(yFrontPosition>=canvasHeight){
yFrontPosition = canvasX;
}
}
function drawBackground(){
backCtx.fillStyle = "#24303a";
backCtx.globalAlpha = 0.4;
backCtx.beginPath();
backCtx.moveTo(canvasX,canvasY);
backCtx.lineTo(canvasX+canvasWidth,canvasY);
backCtx.lineTo(canvasX+canvasWidth,canvasY+canvasHeight);
backCtx.lineTo(canvasX,canvasY+canvasHeight);
backCtx.lineTo(canvasX,canvasY);
backCtx.fill();
backCtx.closePath();
backCtx.stroke();
}
function stop(){
clearInterval(interval);
}
</script>

</body>