文艺码农~手把手教你如何绘制一辆会跑车

原创 淡定web 随笔 javascript 7339阅读 15 天前 举报

手把手教你Canvas如何绘制一辆会跑的车哦~

前言

  灵感来源于前些天捡到钱了,就想着是时候给自己买辆车了,工作这么多年了应该对自己好一点,在网上搜索了一下看到这个车型。其实几年前是买过一辆的,但是不到一个月就被人偷了,伤心了好久。这次一定锁好,上三把锁保证小偷再也偷不走了,于是我拿着钱去买了些益力多,跟同事分享了,心情还是比较愉悦的。—— @IT·平头哥联盟,我是首席填坑官苏南(South·Su) ^_^~

  但想来作为一名程序(嗯,还是个菜鸟,专业首席填坑官哦😇),车基本是用不上的啦,为啥?因为有改不完的bug,记得刚毕业那时候最大的梦想是:“撩个妹子 携手仗剑天涯,惩奸除恶、劫富济贫,快意人生~”,无奈一入IT深似海,从此BUG改不完啊。所以还是多学习吧,这不就学着画了个车满足一下自己的心里安慰,在这里把大家一起分享一下,唉,有点扯偏了~,大家先来看一下最终的效果图吧!
每周动画一点点之canvas会跑的车的绘制,图片来源于Google搜索
  

过程解析:

  效果已经看了到,有没有感觉很牛B??其实也就一般般啦~,接下来就让我带大家一起分解一下它的实现过程吧
  canvas中文名中:画布,它就跟我们在纸上画画一样,画某样东西之前,我们要先学会构思、拆解你要画的东西,就跟汽车、手机等东西一样,一个成品都是由很多零件组成的,当你拆解开来,一点点完成再组装的,就会变的容易的多。

  • 绘制地平线
    • 首先我们基于画布的高度取一定的比例,在底部画一条线;
    • 从观察动画,它还有几个点,这个是用于视差滚动的时候,来欺骗我们的眼睛的,直接一条线肯定再怎么动也没有用,点的移动可以形成一个动画的效果;
    • 再加一点修饰,几个点移动有点太单调了,大家可以想像一下,当你骑车的时候,车的速度与周围的事物、建筑、人产生一个交差,那种感觉是很刺激的,那么我们也来加一点东西,让动画看起来更丰富一些,我选择了 三条线,线本身有个渐变过渡的效果,比纯色要灵动些动画看起来更逼真,而且初始它是不在画布范围内的,这个点要注意一下;
    • 下面的两张图,第二张是生成gif工具里截出来的,它就是动画的分解,其实所谓的动画,也是由一张张静态图组成,然后快速过渡,让视觉形成了视差,最后欺骗了大脑,我看见动画了……
    • 知识点lineTostrokeStylestrokerestore等,这里不一一讲解了,如有不了解可自行查看 w3school API

PureCanvasBike-平头哥联盟

本文由@IT·平头哥联盟-首席填坑官∙苏南分享

  • 绘制车轮
    • 接下来我们来画车的两个轮子,轮子的位置在哪里呢?我也是观察了有一会才发现的,其实刚才的地平线,两点的位置,就是车轮的中心点;
    • 所以在刚才绘制点的时候,就记录了5个点的坐标,这样就省去了一次计算,中间有两次是我们需要的
    • 知识点arcfill
      每周动画一点点之车轮
  • 同理,上面画好了两个圆,但车轮肯定有轴承,前后轮我做了些汪样的处理,后轮是实心的加了个填充;
  • 前轮是画了一点断点的圆,用于动画的转动,
  • 在外轮的半径上进行缩小一定比较,画内圈,这里我取了外圈的.94,作为内圆的半径,
  • 还加了两个半圆的描边修饰,让动画跑起来的时候,车轮有动起来的感觉,半圆 Math.PI 就是一个180,(Math.PI * degrees) / 180; degrees 就是我们想要绘制的起始/结束角度;
  • 从下图可以看出,圆的填充用了 放射性渐变,createRadialGradient-创建放射状/环形的渐变(用在画布内容上)

每周动画一点点之canvas车轮动画

车轮动画分解图

  • 接下来我们就拿前轮开刀
  • 前轮也是画了几个半圆,大概就是以某个角度为起点,然后分别画几个半圆,整体是一个半径,中间有断开,如: eAngle = [0,135,270], sAngle = [-45,0,180];就能画出如下图的圆:

车轮动画分解图

  • 具体实现请看下面代码
  • 绘制车身车架
    • 车架,应该也是本次分享中较大的难点之一,刚开始我也是这么认为的,但认真冷静、冷静、静静之后分析也还好,
    • 最开始是用了最笨的办法,lineTOmoveTo、一根一根线的画,画到一半时发现画两个三角或者一个菱形即可,然后再把几根主轴重新画一下,于是两种方法都尝试了一下,
    • 先说三角的吧,配合下面画的一个图讲解一下,
    • 找到圆盘的中心点,介于后轮半径之上;
    • 分析车架的结构,我们可以看为是一个菱形,也可以看着是两个三角形,这里以三角为例,菱形可以看 carBracket2方法;
    • 首先算出三角形的起点、再算出三角形的角度、高度,请看下面示图;
    • 最后在后轮的中心点盖上一个圆点 用于遮挡三角的部分
    • 菱形 就要简单些的,但看起来逼格没有这么高端,就是用lineTo点对点的划线,
    • 以上就是车架的绘制过程,其实感觉菱形是是要简单、代码量也少些的,有兴趣的同学可以自己尝试一下,大家可以看下面的主要代码,新手上路,如果有更好的方式,欢迎老司机指点:

结论 :使用moveTo把画布坐标从O移动到A点 x/y,lineToA开始画到B结束,再从BC点,闭合,即一个三角完成
三角形的绘制

车架分解图

车架菱形分解图

首席填坑官∙苏南,车架分解图

  • 绘制车的豪华宝坐、扶手
    • 坐位一开始是比较懵逼的,不知道如何下手,圆也不圆、方也不方,后面又去复习一下canvas的API,发现了quadraticCurveTo能满足这个需求,—— 二次贝塞尔曲线
    • 画完之后,思考了很久,也没有发现什么技巧,或者规律,可能数学学的不好,没办法只能这样慢慢描了
    • 扶手也是一样的,开始尝试quadraticCurveTo,半天也没画成功,后面尝试去找了它邻居bezierCurveTo,—— 三次贝塞尔曲线
    • 提示:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点
    • 知识点quadraticCurveTobezierCurveTocreateLinearGradient

坐位分解图,quadraticCurveTo

每周动画一点点之canvas自行车的坐位分解图

  • 绘制车的发动机、脚踏板
    • 到了这里,也快接近本文的尾声了,接下来要讲的是是车辆中最重要的部分,车中间齿轮盘,一辆车没有它,你做的再好也是白搭了;
    • 前面多次讲到齿轮的中心点,包括两个三角都是以它的中心计算的三角角度,知道了位置那就容易了,一样的先画几个圆,每个按一定的比例缩小;
    • 然后外围再画一圈锯齿,这样齿轮大概就画好了,齿轮的技巧在于以圆盘为中心点,画一圈线,它跟时钟的刻度原理是一样的;
    • 脚踏板,这个好理解,就是用lineTo画两跟线,其中一根进行一个90度的旋转就ok了,但重点是它在动画过程中的一个过程呢,我的分析过程是这样:
    • 竖着的这根轴是,以圆盘齿轮的中点为基点 N* (Math.PI / 180)转动;
    • 横着的这根轴,也就是脚踏板,它是以竖着的轴底部为Y轴中心点,以自身宽度的二分之一为X轴为中心点,同样以 N* (Math.PI / 180)rotate角度旋转。
    • 说了这么多,我们来看几张动态图吧,顺便贴上代码:

canvas自行车的齿轮展示

canvas自行车脚踏板的展示

  • 绘制车的链条
    • 链条用的是 bezierCurveTo ,cp1x,cp1y,cp2x,cp2y,x,y等参数画出来的,具体看下面代码吧,其实就是两个半椭圆的拼接……
      canvas自行车绘制车的链条

尾声

  以上就是今天@IT·平头哥联盟-首席填坑官苏南给你带来的分享,整个车的绘制过程,感觉车架部分应该还有更好的做法,如果您有更好的建议及想法,欢迎斧正,最后送上完整的示例图!
  文章源码获取-> blog-resource 👈
  想直接在线预览 👈

每周动画一点点之canvas自行车脚踏板的展示

PS:如果您觉得文章不错,想获取更多前端内容,那就请关注下方的 公众号,有惊喜哦。

宝剑锋从磨砺出,梅花香自苦寒来,做有温度的攻城狮,公众号:honeyBadger8

作者:苏南 - 首席填坑官
交流群:912594095,公众号:honeyBadger8
原文链接:https://blog.csdn.net/weixin_43254766/article/details/83267817
本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权,非商业转载请注明原链接及出处。

评论 ( 1 )
最新评论
淡定web 12 天前 1F

努力做一个可爱的人。
不埋怨谁,不嘲笑谁,
也不羡慕谁, 阳光下灿烂,
风雨中奔跑, 做自己的梦,
走自己的路。 ——我是苏南,愿您一切安好,周末愉快,加油