使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canvas生成随机大小的不完美圆形。
首先我们要了解,在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。
那么所谓不完美圆形,实际可以通过一个不等边不对称的多边形来实现。
要实现不等边不对称,一个简单的方法是使多边形各个顶点距离中心点的距离(即半径)为一个随机值就好。
为避免半径落差过大,我们可以给其设定一个最大和最小值,然后在这个区间进行随机,代码如下:
function drawCircle(centerX, centerY, minRad, maxRad) { var points = 512; //多边形边的总数目 var rad, theta; var twoPi = 2 * Math.PI; var x0, y0; context.strokeStyle = "#aa6699"; context.lineWidth = 1.01; context.fillStyle = "#6633aa"; context.beginPath(); theta = 0; x0 = centerX + rad * Math.cos(theta); y0 = centerY + rad * Math.sin(theta); context.lineTo(x0, y0); for (var i = 0; i < points; i++) { theta += twoPi / points; rad = minRad + Math.random() * (maxRad - minRad); //随机半径 x0 = centerX + rad * Math.cos(theta); y0 = centerY + rad * Math.sin(theta); context.lineTo(x0, y0); } context.stroke(); context.fill(); }
上面的代码实现效果如下:
上面这样的图形可以用来模拟松果、毛线球、刺猬等物体。
但如果想模拟海岸线、雨滴、云朵等线条比较柔和的物体,则显然不能满足要求。
我们需要边沿有一个平滑的过渡,而分形算法刚好可以用来完成这个任务。
我们假设半径的长度为1,我们来对这个区间进行细分,第1步在线段中间添加一个节点把区间分成2段,随机一个y坐标,第2步在左右半区间内重复类似操作,如此反复,直到达到预先设定的细分粒度。
为了避免线条的起伏过大,我们在给新增中间节点设定y坐标时,使其和所在细分线段的长度正相关,这样随着细分粒度的提高,局部区域的波动就越小,就形成了一个平滑过渡的效果,代码如下:
function setLinePoints(iterations) { var pointList = {}; pointList.first = { x: 0, y: 1 }; var lastPoint = { x: 1, y: 1 } var minY = 1; var maxY = 1; var point; var nextPoint; var dx, newX, newY; pointList.first.next = lastPoint; for (var i = 0; i < iterations; i++) { point = pointList.first; while (point.next != null) { nextPoint = point.next; dx = nextPoint.x - point.x; newX = 0.5 * (point.x + nextPoint.x); newY = 0.5 * (point.y + nextPoint.y); newY += dx * (Math.random() * 2 - 1); var newPoint = { x: newX, y: newY }; //min, max if (newY < minY) { minY = newY; } else if (newY > maxY) { maxY = newY; } //put between points newPoint.next = nextPoint; point.next = newPoint; point = nextPoint; } } var normalizeRate = 1 / (maxY - minY); point = pointList.first; while (point != null) { point.y = normalizeRate * (point.y - minY); point = point.next; } return pointList; } function drawCircle(centerX, centerY, minRad, maxRad, phase) { var point; var rad, theta; var twoPi = 2 * Math.PI; var x0, y0; //生成分形细分顶点链表,用来获取随机半径, 9次迭代将返回512个顶点。 var pointList = setLinePoints(9); context.strokeStyle = "#aa6699"; context.lineWidth = 1.01; context.fillStyle = "#6633aa"; context.beginPath(); point = pointList.first; theta = phase; rad = minRad + point.y * (maxRad - minRad); x0 = centerX + rad * Math.cos(theta); y0 = centerY + rad * Math.sin(theta); context.lineTo(x0, y0); while (point.next != null) { point = point.next; theta = twoPi * point.x + phase; rad = minRad + point.y * (maxRad - minRad); x0 = centerX + rad * Math.cos(theta); y0 = centerY + rad * Math.sin(theta); context.lineTo(x0, y0); } context.stroke(); context.fill(); }
上面的代码实现效果如下:
很好,我们获得了一个完美的不完美圆形!
最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
Three.js入门教程2 - 着色器(上)
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
WebGL入门教程1 - 3D绘图基础知识
现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...