HTML5 canvas绘制与贝塞尔曲线探索-优快云博客

本文链接：https://blog.youkuaiyun.com/zym0218/article/details/119978330

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
</head>

<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid"	>对不起，您的浏览器不支持画布</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.beginPath();
ctx.arc(150,100,80,0,Math.PI*2,true);
ctx.stroke();
ctx.fill();

ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(190,80,10,0,Math.PI*2,true);
ctx.fill();

ctx.beginPath();
ctx.arc(110,80,10,0,Math.PI*2,true);
ctx.fill();

ctx.beginPath();
ctx.arc(150,110,50,0,Math.PI,false);
ctx.stroke();

ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(90,55);
ctx.bezierCurveTo(90,52,85,40,65,40);
ctx.bezierCurveTo(35,40,35,77.5,35,77.5);
ctx.bezierCurveTo(35,95,55,117,90,135);
ctx.bezierCurveTo(125,117,145,95,145,77.5);
ctx.bezierCurveTo(145,77.5,145,40,115,40);
ctx.bezierCurveTo(100,40,90,52,90,55);
ctx.fill();

ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(200,55);
ctx.bezierCurveTo(200,52,195,40,175,40);
ctx.bezierCurveTo(145,40,145,77.5,145,77.5);
ctx.bezierCurveTo(145,95,165,117,200,135);
ctx.bezierCurveTo(235,117,255,95,255,77.5);
ctx.bezierCurveTo(255,77.5,255,40,225,40);
ctx.bezierCurveTo(210,40,200,52,200,55);
ctx.fill();
</script>
</body>
</html>