SOURCE

console 命令行工具 X clear

                    
>
console
function draw() {
  var canvas = document.getElementById('mycanvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath()
    ctx.fillStyle = "red"
    ctx.arc(75, 40, 8, 0, 2 * Math.PI)
    ctx.closePath()
    ctx.fill()

// 75, 37, 70, 25, 50, 25
    ctx.beginPath()
    ctx.fillStyle = "green"
    ctx.arc(75, 37, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "green"
    ctx.arc(70, 25, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "orange"
    ctx.arc(50, 25, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()


// 20, 25, 20, 62.5, 20, 62.5
    ctx.beginPath()
    ctx.fillStyle = "blue"
    ctx.arc(20, 25, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "blue"
    ctx.arc(20, 62.5, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "pink"
    ctx.arc(20, 62.5, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()


// 20, 80, 40, 102, 75, 120;
    ctx.beginPath()
    ctx.fillStyle = "yellow"
    ctx.arc(20, 80, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "yellow"
    ctx.arc(40, 102, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "silver"
    ctx.arc(75, 120, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()

// 110, 102, 130, 80, 130, 62.5
    ctx.beginPath()
    ctx.fillStyle = "purple"
    ctx.arc(110, 102, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "purple"
    ctx.arc(130, 80, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "white"
    ctx.arc(130, 62.5, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()


// 130, 62.5, 130, 25, 100, 25
    ctx.beginPath()
    ctx.fillStyle = "white"
    ctx.arc(130, 62.5, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "grey"
    ctx.arc(130, 25, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "brown"
    ctx.arc(100, 25, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()

// 85, 25, 75, 37, 75, 40
    ctx.beginPath()
    ctx.fillStyle = "lavender"//熏衣色
    ctx.arc(85, 25, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "green"
    ctx.arc(75, 37, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.fillStyle = "red"
    ctx.arc(75, 40, 8, 0, 2 * Math.PI);
    ctx.closePath()
    ctx.fill()


    //三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.stroke();
   }
}
window.onload = () => {
    draw()
}
/*
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,
cp2x,cp2y为控制点二,x,y为结束点。
*/
<div class="drawWrapper">
    <canvas id="mycanvas" width="200" height="200"></canvas>
</div>
.drawWrapper #mycanvas {
    border: 1px solid black;
}