摘要：一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色提问：未闭合的路径可以填充吗？可以。Canvas会从你当前路径的终点直接连接到起点，然后填充。如图：但你可以发现，最后一段没有描边。记得我们前一篇文章用4条线画了一个正方形，但canvas不会这么差劲，连直接绘制矩形的函数都没有。你可以使用fillRect()直接填充一个矩形：ctx
阅读全文
摘要：接上一篇canvas画线条教程上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图：这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它。大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像素，会是什么情况呢？大概是这个样子：每个像素都有起止范围，如图所示，他们的范围从左起，跨过1像素，到右止。如果我们画1像素线条的时候，遵循像素的起止范围，那么我们肯定能得到一个很标准的细线。如下：但遗憾的是canvas的线条
阅读全文
摘要：如果你还不知道Canvas是什么，可以看看上一篇.在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。在开始之前我们先拿出画布和画笔：var cvs = document.getElementById('cvs'); //画布var ctx = cvs.getContext('2d'); // 画笔我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然后移动到指定的点（即坐标）。ctx.moveTo(x,y)此过程中不
阅读全文
摘要：虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础。另外，画图嘛，总有一些图像方面的术语和知识点，所以如果你有过做图或美工经验，学习Canvas会更容易。Canvas，意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以，把他看成一块实实在在的画布可以加快理解。画布用canvas作画，首先，你需要有一块“画布”。如果你的书架里面没有画布，你可以买一卷回来放进去。当然，在网页里面我们不需要花钱买，直接写
阅读全文
