1、效果图-白色光线从左上角移动到右下角
2、代码-废话不多说上代码
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>canvas</title>
</head>
<style>
body{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
#c1{
}
</style>
<body>
<canvas id = "c1">
</canvas>
<script>
var c1 = document.getElementById("c1");
c1.width = document.documentElement.clientWidth ;
c1.height = document.documentElement.clientHeight ;
var ctx = c1.getContext("2d");
let index = 0;
function render(){
ctx.clearRect(0,0,c1.width,c1.height);
index+=0.0050;
if(index > 1){
index = 0;
}
let linearGradient = ctx.createLinearGradient(0,0,c1.width,c1.height);
linearGradient.addColorStop(0,"blue");
linearGradient.addColorStop(index,"white");
linearGradient.addColorStop(1,"red");
ctx.fillStyle = linearGradient;
ctx.fillRect(0,0,c1.width,c1.height);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
