用canvas实现投影的效果,待完善

做一个类似于物体投影的效果,移动上面的一层,投影效果一起变,这个后面再想想,先实现效果

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
         #myCanvas{ border: 1px dotted #aaaaaa; padding:10px; }
        </style>
    </head>
    
    <body>
        <canvas id="myCanvas" width="1000" height="1200"> </canvas>
        <script>
		let color="rgba(100, 100, 100, 0.3)"
		let x1 = 100;
		let y1 = 10
		let x2 = 150
		let y2 = 40
		
		let x3 = 200
		let y3 = 200
		let x4 = 500
		let y4 = 500
        var c = document.getElementById("myCanvas");
        var context=c.getContext("2d");
		
		//上
        context.moveTo(x1,y1);
		context.lineTo(x2,y1);
		context.lineTo(x4,y3);
		context.lineTo(x3,y3);
		context.lineTo(x1,y1);
		context.lineWidth=1;
		context.fillStyle=color;
		context.fill();
		context.strokeStyle=color;
		context.stroke();
		//下
		context.moveTo(x1,y2);
		context.lineTo(x2,y2);
		context.lineTo(x4,y4);
		context.lineTo(x3,y4);
		context.lineTo(x1,y2);
		context.lineWidth=1;
		context.fillStyle=color;
		context.fill();
		context.strokeStyle=color;
		context.stroke();
		//左
		context.moveTo(x1,y1);
		context.lineTo(x1,y2);
		context.lineTo(x3,y4);
		context.lineTo(x3,y3);
		context.lineTo(x1,y1);
		context.lineWidth=1;
		context.fillStyle=color;
		context.fill();
		context.strokeStyle=color;
		context.stroke();
		//右
		context.moveTo(x2,y1);
		context.lineTo(x2,y2);
		context.lineTo(x4,y4);
		context.lineTo(x4,y3);
		context.lineTo(x2,y1);
		context.lineWidth=1;
		context.fillStyle=color;
		context.fill();
		context.strokeStyle=color;
		context.stroke();
        </script>
    </body>
</html>

最后的效果
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读