今天来个画布的讲解，对于画布你们了解多少呢。
Canvas他是使用 JavaScript 来绘制图像的，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
在画布的流程中大致是这样：
1、’先获取画布canvas；
2、创建2d画布；
3、起始点
4、过渡；
5、结尾点；
来看看我画的太极吧：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas width="300px" height="300px" style="border: 1px solid"></canvas>
<script>
var ca=document.querySelector("canvas");
var x=ca.getContext("2d");
x.beginPath();
// 两个大圆相交
x.fillStyle="white";
x.arc(150,150,150,0,180*Math.PI/180,false);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.fillStyle="black";
x.arc(150,150,150,0,180*Math.PI/180,true);
x.fill();
x.stroke();
x.closePath();
//两个小圆
x.beginPath();
x.restore(90*Math.PI/180);
x.fillStyle="black";
x.arc(76,150,75,0,180*Math.PI/180);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.restore(90*Math.PI/180);
x.fillStyle="white";
x.arc(76,150,20,0,360*Math.PI/180);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.fillStyle="white";
x.arc(227,150,75,0,180*Math.PI/180,true);
x.fill();
x.stroke();
x.closePath();
x.beginPath();
x.fillStyle="black";
x.arc(227,150,20,0,360*Math.PI/180);
x.fill();
x.stroke();
x.closePath();
</script>
</body>
</html>
时间： 2024-12-14 13:17:50