本文属于《html5 Canvas画图系列教程

这篇文章写得有点晚了.原因?因为我写着写着就忘了有这一茬还没写….

canvas的isPointInPath是一个非常重要的函数,其作用是判断某一点是否是在某个路径内.其语法如下:

context.isPointInPath(x,y)

其中很明显,x和y就是一个点的坐标了.

canvas有个致命的缺点就是本身缺乏交互性,比如这个问题:

问题1:我画了一个黑圆,想让鼠标经过的时候颜色变红,鼠标移出后又变回来继续阅读

本文属于《html5 Canvas画图系列教程》,本文有些长.

前面我讲过在canvas中实现图形的变换,这是比较简单的,因为都是用的直观的函数.今天我还是要实现同样的图形变化效果,但不同的是我要用一个看起来就让人心碎的方法,就是transform,也就是矩阵matrix.

其实我对Matrix的认识只限于他是一部很好看的电影(即黑客帝国),在没看此电影前,我根本不知道有矩阵这个名字,而且矩阵这名字又不霸气,我听了除了不明白为什么要叫这么个怪名字之外没什么感觉;看了电影,然后又知道矩阵是个数学上的东西后,我就知道要糟,作为一个数学白痴的我希望永远不要和矩阵打上交道.

无奈我居然做了程序员!

不说这些伤心事了.我要提前告诉大家,虽然前面讲的scale,tranlate,rotate是独立的方法,但实际上他们之所以能产生变化,都是因为他们操作了矩阵.而canvas的transform,就是直接操作矩阵,所以理论上效率还比前面说的这些方法要高.

ctx.transform(a,b,c,d,e,f);

开始之前我还要提一个问题:图形都有矩阵,那一个图形的默认矩阵是什么样子的?继续阅读

本文属于《html5 Canvas画图系列教程

这次要讲的是控制canvas中的图形组合模式的属性:globalCompositeOperation.这个属性的名字很长,翻译过来大概是”全局组合操作”的意思.

ctx.globalCompositeOperation = type;

他的作用呢有些像photoshop中的图层叠加效果,比如加亮变暗叠加.如果你没学过作图,可能这些术语听起来很抽象,不过不要紧,因为这个属性我们基本上不用.

为什么不用?还是这个原因:标准不一.设置同样的globalCompositeOperation,在chrome与firefox中会出现截然不同的效果,甚至同为webkit内核的浏览器safari和chrome也不能做到效果统一.

更离谱的是,w3c通常是作为标准的制订者出现,他们也制订了globalCompositeOperation的标准,就是firefox中用的这种,但他们又貌似觉得chrome的做法才是更合理的,所以有传言globalCompositeOperation的标准将会更改—-这样一来,我们可以在很长一段时间内不考虑使用globalCompositeOperation属性了.

如果依照firefox(即现行标准)的做法,globalCompositeOperation的属性有以下效果(直接摘自MDN):

注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”。继续阅读

本文属于《html5 Canvas画图系列教程

文章写到现在才发现我忘了介绍在canvas上写字的方法,呃,这篇补上。

其实在canvas里写字是很简单的,他有两个原生方法,即strokeText(描边文字)和fillText(填充文字)——一看就知道他们和strokeRect与fillRect是一伙的啦。

他们不能产生路径

他们的使用方法很简单,接受3个参数,依次是要写的文本,x坐标,y坐标,如:

1
2
ctx.fillText('1223',50,50);
ctx.strokeText('asdfsadf',150,50);

当然,这个弱爆了。默认画出来都是黑色的字体。继续阅读