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

最新推荐文章于 2022-04-21 23:36:20 发布

未兆

最新推荐文章于 2022-04-21 23:36:20 发布

阅读量740

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u013788943/article/details/106272586

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

<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>

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

未兆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas实现投影的效果，待完善

做一个类似于物体投影的效果，移动上面的一层，投影效果一起变，这个后面再想想，先实现效果<html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #myCanvas{ border: 1px dotted #aaaaaa; padding:10px; } </style> </h
复制链接

扫一扫