JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<canvas id="myCanvas" width="440" height="300">
    您的浏览器不支持canvas!
</canvas>

CSS

canvas{
    border:1px solid #CCC;
}

JavaScript

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return;
}

var ctx = canvas.getContext("2d");
drawA();
drawTriangle();

function drawA() {
    ctx.save();
    ctx.strokeStyle = "#F60";
    ctx.lineWidth = 5;
    ctx.beginPath();
    
    ctx.moveTo(100, 10);
    ctx.lineTo(10, 280);
    ctx.stroke();
    
    ctx.moveTo(99, 10);
    ctx.lineTo(190, 280);
    ctx.stroke();
    
    ctx.moveTo(46, 180);
    ctx.lineTo(155, 180);
    ctx.stroke();
    
    ctx.restore();
}

function drawTriangle() {
    ctx.save();
    ctx.fillStyle = "#AAA";
    ctx.beginPath();
    ctx.moveTo(320, 10);
    ctx.lineTo(220, 280);
    ctx.lineTo(420, 280);
    ctx.closePath();
    ctx.fill();
}