<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body{text-align: center}
canvas{border: 1px solid}
</style>
<body>
<canvas id="can1" width="800" height=" 500"></canvas>
<script>
let ctx=document.getElementById("can1").getContext("2d");
ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(200,100);
ctx.strokeStyle="green";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(600,300);
ctx.strokeStyle="green";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(200,100);
ctx.lineTo(190,110);
ctx.strokeStyle="green";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(200,100);
ctx.lineTo(210,110);
ctx.strokeStyle="green";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(600,300);
ctx.lineTo(590,290);
ctx.strokeStyle="green";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(600,300);
ctx.lineTo(590,310);
ctx.strokeStyle="green";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(230,230);
ctx.strokeStyle="red";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(230,230);
ctx.lineTo(250,200);
ctx.strokeStyle="red";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(250,200);
ctx.lineTo(280,250);
ctx.strokeStyle="red";
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(280,250);
ctx.lineTo(350,180);
ctx.strokeStyle="red";
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
canvac绘制表格 曲线
最新推荐文章于 2022-04-28 14:18:22 发布