JSFiddle - React, Tailwind, and code Playground

by Mo Qiao

HTML

<canvas id="canvas">
   当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

CSS

#canvas{
    width: 100%;
      height: auto;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var WINDOW_WIDTH = window.screen.availWidth;
var WINDOW_HEIGHT = window.screen.availWidth;
ctx.beginPath();
	ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
	ctx.moveTo(110, 75);
	ctx.arc(75, 75, 35, 0, Math.PI, false);
	ctx.moveTo(65, 65);
	ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
	ctx.moveTo(95, 65);
	ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
	ctx.stroke();
	ctx.clearRect(0, 0, 500, 500);
	for (var i = 0; i < 4; i++) {
		for (var j = 0; j < 3; j++) {
			ctx.beginPath();
			var x = 20 + j * 40;
			var y = 20 + i * 40;
			var radisu = 20;
			var startAngle = 0;
			var endAngle = Math.PI + (Math.PI * j) / 2;
			var anticlockwise = i % 2 == 0 ? true : false;
			ctx.arc(x, y, radisu, startAngle, endAngle, anticlockwise);
			if (i > 1) {
				ctx.fill();
			} else {
				ctx.stroke();
			}
		}
	}