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;
}