Canvas一笔一笔，画出一辆会跑车

2023-01-15 22:17| 来源: 网络整理| 查看: 265

手把手教你Canvas如何绘制一辆会跑的车哦～作者：首席填坑官∙苏南来源：@IT·平头哥联盟交流：912594095，公众号：honeyBadger8；本文原创，著作权归作者所有，转载请注明原链接及出处。前言

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

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

每周动画一点点之canvas会跑的车的绘制,图片来源于Google搜索过程解析：

　　效果已经看了到，有没有感觉很牛B？？其实也就一般般啦～，接下来就让我带大家一起分解一下它的实现过程吧

　　canvas中文名中：画布，它就跟我们在纸上画画一样，画某样东西之前，我们要先学会构思、拆解你要画的东西，就跟汽车、手机等东西一样，一个成品都是由很多零件组成的，当你拆解开来，一点点完成再组装的，就会变的容易的多。

绘制地平线：首先我们基于画布的高度取一定的比例，在底部画一条线;从观察动画，它还有几个点，这个是用于视差滚动的时候，来欺骗我们的眼睛的，直接一条线肯定再怎么动也没有用，点的移动可以形成一个动画的效果;再加一点修饰，几个点移动有点太单调了，大家可以想像一下，当你骑车的时候，车的速度与周围的事物、建筑、人产生一个交差，那种感觉是很刺激的，那么我们也来加一点东西，让动画看起来更丰富一些，我选择了三条线，线本身有个渐变过渡的效果，比纯色要灵动些动画看起来更逼真，而且初始它是不在画布范围内的，这个点要注意一下;下面的两张图，第二张是生成gif工具里截出来的，它就是动画的分解，其实所谓的动画，也是由一张张静态图组成，然后快速过渡，让视觉形成了视差，最后欺骗了大脑，我看见动画了……知识点：lineTo、strokeStyle、stroke、restore等，这里不一一讲解了，如有不了解可自行查看 w3school APIPure Canvas Bike - 平头哥联盟本文由@IT·平头哥联盟-首席填坑官∙苏南分享 horizon(){ /** * 轮子的底部，也称地平线： 1.清除画布 2.画一条直线，且高度6px 本文@IT·平头哥联盟-首席填坑官∙苏南分享，非商业转载请注明原链接及出处 */ this.wheelPos = []; this.ctx.save(); this.ctx.clearRect(0, 0, this.canvasW, this.canvasH); let horizonX = 0,horizonY = this.canvasH-100; this.ctx.beginPath(); this.ctx.strokeStyle = this.color; this.ctx.lineWidth=6; this.ctx.moveTo(horizonX,horizonY); this.ctx.lineTo(this.canvasW,horizonY); this.ctx.closePath(); this.ctx.stroke(); Array.from({length:5}).map((k,v)=>{ let dotProportion = (this.canvasW*0.49)*v-this.oneCent; this.wheelPos.push({x:dotProportion,y:horizonY-this.wheelRadius}); let startX = dotProportion-(this.animateNum*2); //用于动画滚动移动 this.ctx.beginPath(); this.ctx.strokeStyle = "#f9f8ef"; this.ctx.lineWidth=6; this.ctx.moveTo(startX,horizonY); this.ctx.lineTo(startX+5,horizonY); this.ctx.closePath(); this.ctx.stroke(); }); this.ctx.restore(); this.shuttle(); // this.wheel(); } shuttle(){ /** * 画几根横线，有点视差，感觉骑车在飞速穿梭的感觉：本文@IT·平头哥联盟-首席填坑官∙苏南分享，非商业转载请注明原链接及出处 */ let shuttleX = this.canvasW+100, shuttleY = this.canvasH/6; let shuttleW = shuttleX+100; [0,40,0].map((k,v)=>{ let random = Math.random()+2; let x = shuttleX+k-(this.animateNum*(2.2*random)); let y = shuttleY+v*24; let w = shuttleW+k-(this.animateNum*(2.2*random)); let grd=this.ctx.createLinearGradient(x,y,w,y); grd.addColorStop(0,"#30212c"); grd.addColorStop(1,"#fff"); this.ctx.beginPath(); this.ctx.lineCap="round"; this.ctx.strokeStyle = grd; this.ctx.lineWidth=3; this.ctx.moveTo(x,y); this.ctx.lineTo(w,y); this.ctx.stroke(); this.ctx.closePath(); }); }绘制车轮：接下来我们来画车的两个轮子，轮子的位置在哪里呢？我也是观察了有一会才发现的，其实刚才的地平线，两点的位置，就是车轮的中心点;所以在刚才绘制点的时候，就记录了5个点的坐标，这样就省去了一次计算，中间有两次是我们需要的知识点：arc、fill每周动画一点点之车轮 console.log(this.wheelPos); this.wheelPos = this.wheelPos.slice(1,3); //这里取1-3 console.log(this.wheelPos); this.wheelPos.map((wheelItem,v)=>{ let wheelItemX = wheelItem.x, wheelItemY= wheelItem.y-this.wheelBorder/1.5; //外胎//首席填坑官∙苏南的专栏交流：912594095、公众号：honeyBadger8 this.ctx.beginPath(); this.ctx.lineWidth=this.wheelBorder; this.ctx.fillStyle = "#f5f5f0"; this.ctx.strokeStyle = this.color; this.ctx.arc(wheelItemX,wheelItemY,this.wheelRadius,0,Math.PI*2,false); this.ctx.closePath(); this.ctx.stroke(); this.ctx.fill(); //最后两轮胎中心点圆轴承 this.axisDot(wheelItemX,wheelItemY); this.ctx.restore(); }); this.ctx.restore();同理，上面画好了两个圆，但车轮肯定有轴承，前后轮我做了些汪样的处理，后轮是实心的加了个填充;前轮是画了一点断点的圆，用于动画的转动，在外轮的半径上进行缩小一定比较，画内圈，这里我取了外圈的.94，作为内圆的半径，还加了两个半圆的描边修饰，让动画跑起来的时候，车轮有动起来的感觉，半圆 Math.PI 就是一个180,(Math.PI * degrees) / 180; degrees 就是我们想要绘制的起始/结束角度;从下图可以看出，圆的填充用了放射性渐变，createRadialGradient-创建放射状/环形的渐变（用在画布内容上）每周动画一点点之canvas车轮动画车轮动画分解图 context.createRadialGradient(x0,y0,r0,x1,y1,r1); + createRadialGradient API 说明： x0 = 渐变的开始圆的 x 坐标 y0 = 渐变的开始圆的 y 坐标 r0 = 开始圆的半径 x1 = 渐变的结束圆的 x 坐标 y1 = 渐变的结束圆的 y 坐标 r1 = 结束圆的半径详细使用请看下面代码的实例 let scaleMultiple = this.wheelRadius*.94; let speed1 = this.animateNum*2; //外圈半圆速度 let speed2 = this.animateNum*3; //内小圈半圆速度 //后轮 if(v === 0){ //内圆 this.ctx.beginPath(); let circleGrd=this.ctx.createRadialGradient(wheelItemX,wheelItemY,18,wheelItemX,wheelItemY,scaleMultiple); circleGrd.addColorStop(0,"#584a51"); circleGrd.addColorStop(1,"#11090d"); this.ctx.fillStyle = circleGrd; this.ctx.arc(wheelItemX,wheelItemY,scaleMultiple,0,Math.PI*2,false); this.ctx.fill();//首席填坑官∙苏南的专栏交流：912594095、公众号：honeyBadger8 this.ctx.closePath(); //两个半圆线 [ {lineW:2,radius:scaleMultiple*.6,sAngle:getRads(-135+speed1) , eAngle:getRads(110+speed1)}, {lineW:1.2,radius:scaleMultiple*.45,sAngle:getRads(45+speed2) , eAngle:getRads(-50+speed2)} ].map((k,v)=>{ this.ctx.beginPath(); this.ctx.lineCap="round"; this.ctx.strokeStyle ="#fff"; this.ctx.lineWidth=k.lineW; this.ctx.arc(wheelItemX,wheelItemY,k.radius,k.sAngle,k.eAngle,true); this.ctx.stroke(); this.ctx.closePath(); }); this.ctx.restore(); }接下来我们就拿前轮开刀：前轮也是画了几个半圆，大概就是以某个角度为起点，然后分别画几个半圆，整体是一个半径，中间有断开，如： eAngle = 0，135，270, sAngle = -45，0，180;就能画出如下图的圆：车轮动画分解图具体实现请看下面代码： //两个圆，再缩小一圈，画线圆 Array.from({length:3}).map((k,v)=>{ let prevIndex = v-1 { let radian = (Math.PI / 15) ; this.ctx.beginPath(); this.ctx.lineCap="round"; this.ctx.strokeStyle = this.color; this.ctx.rotate(radian); this.ctx.lineWidth=3; this.ctx.moveTo(0,discDotY); this.ctx.lineTo(1.5,discDotY); // ctx.arc(discDotX,discDotY,6,0,Math.PI*2,false); this.ctx.closePath(); this.ctx.stroke(); }); this.pedal(discX,discY,discRadius); this.pedal(discX,discY,discRadius,1); this.ctx.restore();//首席填坑官∙苏南的专栏交流：912594095、公众号：honeyBadger8 } pedal(coordinateX,coordinateY,discRadius,turnAngle=0){ //脚踏板，分两次初始化，一次在中心齿轮绘制之前，一次在之后， //本文由@IT·平头哥联盟-首席填坑官∙苏南分享 let pedalX = coordinateX, pedalY = coordinateY - discRadius*.7; let pedalW = 6, pedalH = discRadius*1.9; let radian = (this.animateNum)*(Math.PI / 180) ; let radianHor = (this.animateNum)*(Math.PI / 180) ; let turnAngleNum = 1; let moveY = 28; if(turnAngle !== 0){ this.ctx.rotate(-180*(Math.PI/180)); turnAngleNum = (Math.PI/180); }; this.ctx.beginPath(); this.ctx.rotate(radian*turnAngleNum); this.ctx.lineCap="round"; this.ctx.strokeStyle = this.gearColor; this.ctx.lineWidth=pedalW; this.ctx.moveTo(-1,moveY); this.ctx.lineTo(0,pedalH); this.ctx.closePath(); this.ctx.stroke(); this.ctx.save(); let pedalHorW = pedalH/1.5,pedalHorH=pedalW; this.ctx.translate(0,pedalH); this.ctx.beginPath(); this.ctx.rotate(-radianHor); this.ctx.lineCap="round"; this.ctx.fillStyle = "#fff"; this.ctx.strokeStyle = this.gearColor; this.ctx.lineWidth =2; this.ctx.roundRect(-pedalHorW/2,-2,pedalHorW,pedalHorH,5); this.ctx.closePath(); this.ctx.fill(); this.ctx.stroke(); this.ctx.restore(); }绘制车的链条：链条用的是 bezierCurveTo ，cp1x,cp1y,cp2x,cp2y,x,y等参数画出来的，具体看下面代码吧，其实就是两个半椭圆的拼接……canvas自行车绘制车的链条 //链条 let chainW = ( coordinateX+discRadius - this.wheelPos[0].x) / 2; let chainX = this.wheelPos[0].x +chainW-5 ; let chainY = coordinateY; this.ctx.save(); this.ctx.translate(chainX,chainY+4.8); this.ctx.rotate(-2*(Math.PI/180)); let r = chainW+chainW*.06,h = discRadius/2; this.ctx.beginPath(); this.ctx.moveTo(-r, -1); this.ctx.lineWidth=3; this.ctx.strokeStyle = "#1e0c1a"; this.ctx.bezierCurveTo(-r,h*1.5,r,h*4,r,0); this.ctx.bezierCurveTo(r,-h*4,-r,-h*1.5,-r,0); this.ctx.closePath(); this.ctx.stroke();//首席填坑官∙苏南的专栏交流：912594095、公众号：honeyBadger8 this.ctx.restore();尾声

　　以上就是今天@IT·平头哥联盟-首席填坑官∙苏南给你带来的分享，整个车的绘制过程，感觉车架部分应该还有更好的做法，如果您有更好的建议及想法，欢迎斧正，最后送上完整的示例图！

　　文章源码获取-> blog-resource 👈

　　想直接在线预览 👈

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

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

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