JSFiddle - React, Tailwind, and code Playground

by liyilongcarlos

HTML

<canvas id="canvas" width="500" height="500">浏览器版本过低<canvas>

JavaScript

var can=document.getElementById("canvas");
var cxt=can.getContext("2d");


cxt.beginPath();
cxt.arc(150,10,5,0,360,false);
cxt.closePath();
cxt.stroke();

cxt.moveTo(150,10);
cxt.lineTo(80,50);
cxt.stroke();

cxt.moveTo(150,10);
cxt.lineTo(120,50);
cxt.stroke();

cxt.moveTo(150,10);
cxt.lineTo(160,50);
cxt.stroke();

cxt.moveTo(150,10);
cxt.lineTo(200,50);
cxt.stroke();

cxt.moveTo(150,10);
cxt.lineTo(240,50);
cxt.stroke();

cxt.moveTo(80,50);
cxt.lineTo(240,50);
cxt.stroke();

cxt.fillStyle="green";
cxt.fillRect(100,50,10,100);
cxt.fillRect(140,50,10,80);
cxt.fillRect(180,50,10,80);
cxt.fillRect(220,50,10,100);

cxt.strokeStyle="green";
cxt.moveTo(100,150);
cxt.lineTo(220,150);
cxt.stroke();

cxt.moveTo(140,130);
cxt.lineTo(180,130);
cxt.stroke();