做一个类似于物体投影的效果,移动上面的一层,投影效果一起变,这个后面再想想,先实现效果
<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>
最后的效果