JSFiddle - React, Tailwind, and code Playground

なんかやる途中。ひし形

by ethertank

HTML

<canvas id="canvas1"></canvas>

JavaScript

var d = document;

var c = d.getElementById('canvas1'),
    cs = 200,
    ctx = c.getContext('2d');

c.width = c.height = cs;

ctx.fillRect(0, 0, cs, cs);

ctx.fillStyle = '#fff';
ctx.strokeStyle = '#ef3';
ctx.shadowColor = '#ef3';
ctx.shadowBlur = 20;

ctx.beginPath();
ctx.moveTo(cs / 2, 5);
ctx.lineTo(cs / 2 + cs * 0.1, cs / 2);
ctx.lineTo(cs / 2, cs - 5);
ctx.lineTo(cs / 2 - cs * 0.1, cs / 2);
ctx.closePath();
ctx.fill();

ctx.translate(cs/2, cs/2);

/*
var rad = 90 * Math.PI / 180;
ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0 );



ctx.beginPath();
ctx.moveTo(cs / 2, 5);
ctx.lineTo(cs / 2 + cs * 0.1, cs / 2);
ctx.lineTo(cs / 2, cs - 5);
ctx.lineTo(cs / 2 - cs * 0.1, cs / 2);
ctx.closePath();
ctx.fill();
*/