我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛
前言
十五的月亮十六圆，所以今天画个圆月亮也是很正常的，这篇文章我们就在canvas上用鼠标来画一个月亮，因为我前端技术很差，所以就大概意思一下。我们需要先生成一个canvas作为我们的画布，在上面先描绘一个提示性的圆形图案，表示出用户应该在哪里画一个多大的圆。最后再计算一下用户画的圆怎么样，看看圆不圆。
准备工作
要想画一个圆，我们需要一个画布和对应的存放所画点的数组，还有一个标识paint来计算现在是否正在画的标识位。
var pointArray = [];
var cnv = document.getElementById('canvasPaper');
var ctx = cnv.getContext('2d');
var paint = false;
如何使用canvas画圆
使用canvas画圆还是比较简单的，使用arc()方法直接就可以绘制了。
// 开始绘制路径
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#FFFFCC';
// 绘制圆的路径**
//画圆 arc( 圆心的横坐标, 圆心的纵坐标, 半径的长度, 绘制的起始角度, 绘制的终结角度, 是否逆时针 )
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
// 描边路径
ctx.stroke();
ctx.closePath();
ctx.save();
如上，我们画出来了一个半径为50的圆形路径，在这里必须要注意要对ctx进行closePath的操作，不然之后的绘画会导致这个圆形的颜色发生改变。这个路径颜色我们使用的是FFFFCC，比较淡一些，用来提示月亮的位置。
画月亮
我们需要对鼠标的mousedown，mousemove还有mouseup方法进行监听，这里我们直接用jquery来进行操作吧。
$(cnv).mousedown(function (e) {
ctx.beginPath();
paint = !paint;
ctx.strokeStyle = '#FFFF00';
ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
});
$(cnv).mousemove(function (e) {
ctx.strokeStyle = '#FFFF00';
if (paint) {
pointArray.push({"x": e.pageX - this.offsetLeft, "y": e.pageY - this.offsetTop});
console.log(pointArray);
ctx.lineTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
ctx.stroke();
}
});
$(cnv).mouseup(function (e) {
ctx.strokeStyle = '#FFFF00';
paint = !paint;
ctx.closePath();
ctx.save();
});
这里需要注意在mousedown之后要对paint进行取反，这样才能在鼠标移动时画出对应的点和颜色，鼠标移动的时候需要将对应的画点记录下来，在后面进行计算月亮的完整性和填充用。这里的颜色使用更为深一些的黄色，显得比较明显。
计算月亮是不是圆并填充颜色
计算一下画出来的月亮是不是圆，这个可以通过计算画的点距离圆心的长度和半径的差值来得到。在计算的同时，对这个月亮进行填充。
function calculate() {
let totalPoint = 100;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "#FFFF00";
for (let i = 0; i < pointArray.length; i++) {
ctx.moveTo(100, 100);
ctx.lineTo(pointArray[i].x, pointArray[i].y);
ctx.stroke();
//计算点距圆心的长度，这里是勾股定理。
let lineLength = Math.sqrt(Math.pow(pointArray[i].x - 100, 2) + Math.pow(pointArray[i].y - 100, 2));
totalPoint = totalPoint - Math.abs((50 - lineLength) * 0.01);
}
ctx.closePath();
ctx.save();
//画的点太少就说明没想好好画，不及格！
if (pointArray.length < 100) {
totalPoint = 59;
}
alert("您的月亮的完整度是" + totalPoint);
}
页面代码
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body style="background-color: black">
<canvas id="canvasPaper" width="800" height="800"></canvas>
<input type="button" onclick="calculate()" value="开始计算"/>
<script>
//上面的代码填入进来
</script>
</body>
</html>
最后为整个页面设置一个黑色的背景，打完收工！
