<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas width="300" height="300"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
//正方体的边长
var lineW = 200;
//起始点横纵坐标
var x = 0;
var y = 100;
//实线部分
ctx.moveTo(x, y);
ctx.lineTo(x, y + lineW);
ctx.lineTo(x + lineW, y + lineW);
ctx.lineTo(x + lineW, y);
ctx.lineTo(x, y);
ctx.lineTo(x + lineW / 2, y - lineW / 2);
ctx.lineTo(x + lineW * 3 / 2, y - lineW / 2);
ctx.lineTo(x + lineW * 3 / 2, y + lineW / 2);
ctx.lineTo(x + lineW, y + lineW);
ctx.lineTo(x + lineW, y);
ctx.lineTo(x + lineW * 3 / 2, y - lineW / 2);
ctx.lineTo(x + lineW, y);
ctx.fillStyle = '#DD5353';
ctx.fill();
ctx.strokeStyle = "#333";
ctx.stroke();
//虚线部分
ctx.beginPath();
ctx.lineTo(x, y + lineW);
ctx.lineTo(x + lineW / 2, y + lineW / 2);
ctx.lineTo(x + lineW / 2, y - lineW / 2);
ctx.lineTo(x + lineW / 2, y + lineW / 2);
ctx.lineTo(x + lineW * 3 / 2, y + lineW / 2);
ctx.setLineDash([5]);
ctx.stroke();
</script>
</body>
</html>
canvas 立体图
猜你喜欢
转载自blog.csdn.net/qq_39045645/article/details/121471411
今日推荐
周排行