canvas边框动画效果（原创）

Html

Css

.main-boxs {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:#00040F;
}
.middle-box {
	width:400px;
	height:400px;
	position:relative;
	top:50%;
	left:50%;
	margin-left:-200px;
	margin-top:-200px;
	box-shadow:0px 0px 15px 1px rgba(255,255,255,0.89) inset;
}
.canvas-type {
	width:100%;
	height:100%;
	position:absolute;
}
.canvas-type canvas {
	width:100%;
	height:100%;
}

bannerActive(document.getElementById("myCanvas1"));

function bannerActive(object) {
    let c = object;
    let context = c.getContext("2d");

let width = 800; //画布宽度
    let height = 500; //画布高度

let fPoints = [{
            x: 400,
            y: 0,
            r: 6.5
        },
        {
            x: 400,
            y: 0,
            r: 6.5
        },
    ]; //初始点坐标

} else if (fPoints[0].x == 800 && fPoints[0].y <= 400) {
            fPoints[0].y -= 1;
        }

if (fPoints[1].x < 800 && fPoints[1].y == 0) {
            fPoints[1].x += 2;
        } else if (fPoints[1].x == 800 && fPoints[1].y < 400) {
            fPoints[1].y += 1;
        } else if (fPoints[1].y == 400 && fPoints[1].x > 0) {
            fPoints[1].x -= 2;
        } else if (fPoints[1].x == 0 && fPoints[1].y <= 400) {
            fPoints[1].y -= 1;
        }
    }

function render() {
        //默认值为source-over
        let prev = context.globalCompositeOperation;
        //只显示canvas上原图像的重叠部分
        context.globalCompositeOperation = 'destination-in';
        //设置主canvas的绘制透明度
        context.globalAlpha = 0.9;
        //这一步目的是将canvas上的图像变的透明
        context.fillRect(0, 0, width, height);
        //在原图像上重叠新图像
        context.globalCompositeOperation = prev;
        //在主canvas上画新圆
        drawCircle();
        if (width !== 0) {
            //在动画没有结束前，递归渲染
            window.requestAnimationFrame(render);
        }
    }
    window.requestAnimationFrame(render);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.1

立即下载

canvas边框动画效果（原创）

代码描述：Javript css canvas边框动画效果

更新时间：2019-10-13 23:17:42
canvas边框动画效果
html：
<div class="canvas-type"> <canvas id="mycanvas1" width="800" height="400"></canvas> </div>
js：
banneractive(document.getelementbyid("mycanvas1"));

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

威尼斯的泪

相关代码

canvas边框动画效果（原创）

最新