今天先把MDN的canvas的文档整体先通读一遍，然后一步步从教程开始练习一些基础语法，但是一看canvas既然这么牛，基本2d的东西都能做，还可以用来整游戏，不禁感叹这就是canvas之美嘛，爱了爱了。( ఠൠఠ )ﾉ
本来想凭我多年摸鱼经验写一个写轮眼应该问题不大把。毕竟俺从小就看火影忍者，直到遇到了博人传，我就是烧开水也燃不起来了，爷青结。没想到我大意了没有闪，整半天整不出来，后面只好砍需求，一切从简，写一个react的logo吧。
先简单分析一下需求，无非就是3个椭圆和1个实心圆嘛，不禁感叹react之美。实在是通俗易懂，故找到mdn相关api一顿操作，发现椭圆之间首尾是相连的，头给我整大了，啥玩意？
然后百度呗
原来只要我把写在一起的三个椭圆给他分成三次绘制，不就完事了，妙啊~
<html>
<head lang="en">
<meta charset="UTF-8">
<title>椭圆</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="200">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
const canvas=document.getElementById('canvas');
const ctx=canvas.getContext('2d');
// Draw the ellipse
ctx.beginPath();
ctx.lineWidth=8;
ctx.strokeStyle="rgb(1, 216, 251)";
ctx.ellipse(120,100,50,105,Math.PI/4,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth=8;
ctx.strokeStyle="rgb(1, 216, 251)";
ctx.ellipse(120,100,50,105,-Math.PI/4,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth=8;
ctx.strokeStyle="rgb(1, 216, 251)";
ctx.ellipse(120,100,50,105,Math.PI/2,0,2*Math.PI);
ctx.stroke();
// 画圆
ctx.beginPath();
ctx.arc(120,100,10,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="rgb(1, 216, 251)";
ctx.fill();
</script>
</body>
</html>
一个丑陋的react logo就完事了，现在有点晚了，后面学会了canvas优化下，下次一定。
