自己动手画个月亮 |
您所在的位置：网站首页 › canvas画圆并填充颜色 › 自己动手画个月亮 |
自己动手画个月亮
|
我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛 前言十五的月亮十六圆，所以今天画个圆月亮也是很正常的，这篇文章我们就在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); } 页面代码 //上面的代码填入进来最后为整个页面设置一个黑色的背景，打完收工！ |
【本文地址】
今日新闻 |
推荐新闻 |