<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas投影</title>
<style>
html{height: 100%;overflow: hidden;}
body{height: 100%;margin: 0;}
</style>
</head>
<body>
<canvas id="test"></canvas>
<script>
const cvs=document.getElementById('test');
//canvas充满窗口
cvs.width=window.innerWidth;
cvs.height=window.innerHeight;
//画笔
const ctx=cvs.getContext('2d');
/*投影
位置:shadowOffsetX , shadowOffsetY
模糊度:shadowBlur
颜色:shadowColor
* */
ctx.shadowColor='#000';
ctx.shadowOffsetY=30;
ctx.shadowOffsetX=30;
ctx.shadowBlur=30;
ctx.beginPath();
ctx.arc(300,200,100,0,Math.PI*2);
ctx.fillStyle='#93abff';
ctx.fill();
</script>
</body>
</html>