canvas入门里,你没注意到的那些知识

Saul4734 6年前
   <h2>前言</h2>    <p>本文写在七月底,进来不加班就整理了一下,一些非常基础的知识,对于canvas刚入门的人来说,值得阅读一下。</p>    <h2>来个气势如虹的开头</h2>    <p>与看各种文章相比,我更喜欢数学里的逻辑;与学习各种日新月异的框架相比,我更喜欢基础扎实带给人的那种踏实;与拼凑页面页面来回跳转相比,我更喜欢动画,图形在页面中表现的直观。</p>    <p>也许你和我一样,冲着对H5的好奇,冲着对图形的热爱,学了一下canvas,没有熟练,只是简单入了个门,或许你在入门的门槛上就绊倒了,同学不哭,站起来继续撸。我把我入门两天的积累写下来,有些门槛,绊倒了数百次,有些应该也适合你。下文的ctx指的是canvas创建的2d图形化实例,代码:</p>    <pre>  <code class="language-javascript">var canvas = document.querySelector('#test');  //test是Html中一个canvas元素的ID,其宽为600,高为400;  var ctx = canvas.getContext('2d');</code></pre>    <h2>说件重要的事</h2>    <p>2d上下文(画布)坐标开始于<canvas>元素的左上角,其顶点为坐标原点,x轴正方向指向屏幕右侧,Y轴正方向指向屏幕下方。所以x值越大越靠右,Y值越大越靠下。这和我们传统的坐标轴是有很大区别的,下面一张图,也许能看出。Y轴反向也许很好理解,但顺时针正0度在坐标轴的那个位置,就值得我们好好记住了,使用arc,熟悉这个常识很重要。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1ade1ef11321e9cb986544ec0098eeb3.png"></p>    <h2>四个基本方法</h2>    <h3>描边:stroke与strokeStyle</h3>    <pre>  <code class="language-javascript">ctx.strokeStyle = 'red';   ctx.arc(200,200,50,0,PI*2,false);   ctx.stroke();</code></pre>    <p>lineTo,moveTo方法,很基础,这里特别说一下arc(x,y,r,startAngle,endAngle,direction)画圆的方法,这个方法接受6个参数,前五个是必须的,分别是圆心位置(x坐标,y坐标),然后是圆的半径r,再然后是起始位置角和终止位置角,这两个很重要,结合前面那张图理解更,我们可知,上面这段代码绘制的第一个点是(0,50),终止位置也是(0,50)。后面direction是一个可选参数,默认为false,表示顺时针绘制,为true时,为逆时针绘制。</p>    <p>特别说明:</p>    <ul>     <li>红宝书上说绘制路径,都应该以beginPath()方法开始,但实践证明,这并不需要,你只需要在stroke这个方法来结束这段路径的绘制,但加了也不坏事,所以还是加上吧;</li>     <li>只调用一次lineTo(0,50)方法,你是看不到一条直线绘制出来的,因为(0,0)并不是默认的起点,除非你先用moveTo()方法设置一个起点,这个简单的道理叫两点确定一条直线;</li>     <li>closePath()并不是一个与beginPath对照使用的方法,其作用是绘制闭合路径,比如下图所示。可以看到我们只调用了两次lineTo方法,但最后绘制除了三条线,最后这一条线就是closePath作用出来的。但需要注意的是,closePath需在stroke使用前调用。</li>    </ul>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d1953e57b9f1fad77fe5d7e6faa725c8.png"></p>    <h3>填充:fillStyle与fill</h3>    <pre>  <code class="language-javascript">ctx.fillStyle = 'red'  ctx.arc(200,200,50,0,PI/3,false);  ctx.fill();</code></pre>    <p>与描边对应的就是填充,但这个方法很不讲究,通常来讲,只有封闭区间才有资格填充,但fill这个方法不需要,只要你的路径不是一条直线,那它就能被填充,也就是不在同一条直线上的三点,能确定一个面,这个方法真的很牛逼,我是必须服气的。</p>    <h3>绘制文本:stokeText与fillText</h3>    <p>以上两个方法都能写出一个字,但推荐的用法是fillText,因为其写出来的是实心字,而stokeText写出来的是描边空心字,绝大多数艺术字会采用这种写法。当然,你愿意的话也可以两者结合着用。</p>    <pre>  <code class="language-javascript">ctx.fillStyle = 'red'  ctx.font= 'bold 12px Arial';  ctx.fillText('Test',300,200);    ctx.strokeStyle = 'red'  ctx.font= 'bold 12px Arial';  ctx.strokeText('Test',400,200);</code></pre>    <h3>绘制图像:drawImage</h3>    <p>相信很多入门的,都看不到这个地方,canvas不就是绘制图像的嘛,啊,不准确,canvas是绘制图形的。具体说来就是drawImage,它不只能把图片绘制到画布上,他还能绘制canvas图形,这个在星空,雨滴等案列中应用最多,也是canvas离屏优化用的最多的,看下面这个示例。</p>    <p>var cache = document.createElement('canvas');</p>    <p>cache.width = 50;</p>    <p>cache.height = 50;</p>    <p>var cacheCtx = cache.getContext('2d'); //这是一块虚拟画布,因为未添加到dom节点中;</p>    <pre>  <code class="language-javascript">cacheCtx.beginPath();  cacheCtx.strokeStyle = 'red';  cacheCtx.moveTo(5,5);  cacheCtx.lineTo(20,40);  cacheCtx.lineTo(40,20);  cacheCtx.closePath();  cacheCtx.stroke();    ctx.drawImage(cache,50,50);  ctx.drawImage(cache,50,100);  ctx.drawImage(cache,100,50);  ctx.drawImage(cache,100,100);</code></pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f397e25c1f000bc335140d40a4164636.png"></p>    <p>通过上例,我们就能看出drawImage在离屏优化中的应用。为什么这样可以,因为,像上面一样,我们要在一块画布上,画四个相同的三角形,这在浏览器表现上,你看不出任何卡顿,那如果你是要在屏幕上绘制一千个或万个这样的图形,且每一帧还要有规律的变换他们的位置,这时你就能明显感觉出浏览器的卡顿,因为你一直在操作dom中的元素,使浏览器一直在不停的重新绘制,渲染网页。但如果你在每一帧绘制下一个状态前,在js中,通过在虚拟的canvas中先绘制好下一帧的背景状态,然后通过drawImage这个方法,来更新浏览器中的画布状态,这样网页在一帧中就只需要渲染一次,而不是时时在渲染,这就达到了离屏优化的目的,所以这也是drawImage用的最多的场景。</p>    <p>过完以上知识,就算是复习一下入门知识了,至于为什么没提fillRect与strokeRect,其实那就是stroke与fill提供给绘制矩形的一个语法糖。</p>    <h2>奇妙的变换</h2>    <p>也许你和我一样,不习惯自己的坐标系是从左上角开始的,我们更习惯坐标原点在左下角或者正中心。</p>    <h3>坐标原点变换 translate方法</h3>    <p>原点变换到画布中心:ctx.translate(WIDTH/2,HEIGHT/2),WIDTH与HEIGHT分别指画布的宽与高,为了将坐标变换表现得更明显,我在同一块区域,画了两块大小相似的画布,然后让一块使用原始坐标系,一块采用translate变换后的,具体看代码,和结果图;</p>    <pre>  <code class="language-javascript"><div class="red">      <canvas id="test" width="600px" height="400px"></canvas>      <canvas id="testa" width="598px" height="398px"></canvas>  </div>    var ctx = document.querySelector('#test').getContext('2d');  var crx = document.querySelector('#testa').getContext('2d');    ctx.beginPath();  ctx.strokeStyle = 'blue';  ctx.arc(0,0,5,0,PI*2,false);  ctx.moveTo(0,0);  ctx.lineTo(0,150);  ctx.moveTo(0,0);  ctx.lineTo(150,0);  ctx.stroke();    crx.beginPath();  crx.translate(300,200);  crx.arc(0,0,5,0,PI*2,false);  crx.strokeStyle = 'red';  crx.moveTo(0,0);  crx.lineTo(0,150);  crx.moveTo(0,0);  crx.lineTo(150,0);  crx.stroke();</code></pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/558cefc4e47457ff23c28db85f047375.png"></p>    <h3>坐标系旋转变换 rotate方法</h3>    <p>也许你接触canvas很久了,但rotate方法始终没有机会用,只记得红宝书上在绘制钟表时针,分针时,提到了rotate的用法,但只要你熟悉,用法就能千奇百怪。API明确的说rotate(angle),是指围绕原点图像旋转angle弧度。所以,你需要记住两点。第一:图像是围绕原点旋转;第二:与其说是图像旋转,不如说是整个坐标系旋转了。看示例,还是和上面一样,有对比,才有说服力:</p>    <pre>  <code class="language-javascript">ctx.beginPath();  ctx.strokeStyle = 'blue';  ctx.translate(300,200);  ctx.arc(0,0,5,0,PI*2,false);  ctx.moveTo(0,0);  ctx.lineTo(0,150);  ctx.moveTo(0,0);  ctx.lineTo(150,0);  ctx.stroke();  ctx.moveTo(0,0);  ctx.lineTo(0,-150);  ctx.stroke();    crx.beginPath();  crx.strokeStyle = 'red';  crx.translate(300,200);  crx.rotate(PI/3); //旋转60*  crx.arc(0,0,5,0,PI*2,false);  crx.moveTo(0,0);  crx.lineTo(0,150);  crx.moveTo(0,0);  crx.lineTo(150,0);  crx.stroke();  crx.moveTo(0,0);  crx.lineTo(0,-150);  crx.stroke();</code></pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a2a21daa00a4de79a731b1e9ee597c15.png"></p>    <p>与上个图相比,我将两块画布的中心都先变换到了画布的中心,作为对比,红色画笔的做了旋转变换,在分别绘制了正x,正y轴以后,在stoke方法结束一段绘制以后,又绘制了负y轴,可以看到,上一段绘制路径的rotate仍然起作用,所以rotate是对画布坐标系做了变换,而不是狭义上的绘制图像,这个区别很重要。后面在上一段代码,不用sin,cos计算,就能绘制一个正多边形,这里以6边形为例。</p>    <pre>  <code class="language-javascript">ctx.beginPath();  ctx.translate(300,200);  ctx.strokeStyle = 'red';  var a=0;  for(var i=1;i<7;i++){      ctx.lineTo(0,150);      ctx.rotate(PI/3);      a =a + PI/3 ;  }  ctx.closePath();  ctx.stroke();  ctx.lineTo(0,0);  ctx.stroke();</code></pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/698d730ef5aee86f0be56b47001b802b.png"></p>    <h2>不重要,但很点题的API</h2>    <p>绘制一个普通的图形,也许上面的API也已足够,但要让你的图形有亮点,你可能还需要多了解一些,我个人觉得非常有用的两个就是阴影的绘制(shadow)与渐变色的添加(createLinearGradient)。在用canvas做星星背景时,或者飞行的流星周围的闪光,这些都是用shadow做出来的特效。而消逝的流星,头部亮,尾部暗的效果就是用渐变色做的,在以后的系列中,会结合实例多讲一些。</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000012515382</p>    <p> </p>