分类目录归档:HTML5

学习html5的新知识!

html5 Canvas画图教程27:isPointInPath

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

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

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

context.isPointInPath(x,y)

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

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

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

html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等

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

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

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

无奈我居然做了程序员!

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

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

开始之前我还要提一个问题:图形都有矩阵,那一个图形的默认矩阵是什么样子的? 继续阅读html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等

html5 Canvas画图教程25:图形组合模式globalCompositeOperation

本文属于《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画图教程25:图形组合模式globalCompositeOperation

html5 Canvas画图教程24:测量文字尺寸measureText

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

前不久我讲了在canvas中写字的方法,measureText和这个问题有关。我们通常需要知道文字的大小,以确定该把字写在哪里。

measureText就是用来测量文字尺寸的,他有返回值

ctx.measureText(‘text’)

measureText的返回值是一个对象,但里面只有一个属性:width,本来文字的尺寸应该有width也有height,但canvas中的文字连行高都没有,所以measureText也没法得出高度。

所以说呢,measureText的作用不大。

另外,font的设置会对measureText的结果造成不易察觉的影响,比如前面我讲的font设置中的那一串可有可无的属性:caption,icon,menu,message-box,small-caption,status-bar,如果设置了他们,由于浏览器各自的呈现不一样,那么measureText得出的宽度也就不一样了。

比如,我测试

ctx.font = “bolder 33px Arial menu”;

形态下的’1223’,firefox最终结果66,而chrome则是72.去掉menu后,则一个是73,一个是72——也不完全一样,搞毛啊。

measureText只是单纯的测量文字,与是否把文字写到canvas上无关。

这个方法不好用,或者以后会有改进吧。

Html5 canvas画图教程23:全局透明度globalAlpha

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

大家都知道html5里面可以使用rgba颜色,这对我们做半透明效果时非常有用。在canvas中,我们可以用rgba颜色来实现半透明填充或描边。

如果有下面的需求:

我要画N个图形,他们的颜色都不一样,但有个共同点是:所有图形都是50%半透明。

这时如果用rgba来实现,就有点繁琐了。

如果是CSS,我们可以直接设置父元素的opacity搞定;在canvas里,则有个类似的属性globalAlpha.

globalAlpha的值与opacity一样,都是0-1的小数。设置之后,以后的图形都将以其规定的透明度绘制。

ctx.globalAlpha = 0.5;

如何将globalAlpha恢复到初始状态呢?你可以简单的将其重设为1,或者使用restore()函数复原。

本文没有代码,哈哈。

另外要注意,半透明的颜色会对getImageData的获取结果造成影响——显而易见的。

[译]知名Html5 Canvas Javascript库对比

声明:

原文链接:http://www.softr.li/blog/2012/06/20/which-html5-canvas-javascript-library-should-i-use

本译文地址:http://jo2.org/html5-canvas-libary-introduction/

转载请保留。。

我应该选哪个Canvas库?》译文(以下的“我”是指原作者):

我一直在找一个Html5 canvas库,可以让我创建可交互的、带动画的UI界面。我的要求是:

  • 良好的文档,支持与维护,因为我想在以后的项目里还能重用它
  • 可以轻松的创造复杂的图形对象(我的工程比较复杂,可不是一个简单的按钮那样的活儿),最好能支持分组和多层
  • 能帮我处理用户交互
  • 支持触摸设备
  • 提供用于作动态图形的工具 继续阅读[译]知名Html5 Canvas Javascript库对比

Html5 canvas画图教程22:获取与操作像素信息getImageData

本文依然顽固的属于《html5 Canvas画图系列教程

getImageData的直译即“获得图像数据”,他的作用是从canvas中提取像素出来。所以,他是有返回值的。

语法及返回值

ctx.getImageData(x,y,width,height);

这就是他的语法。而他的返回值是一个ImageData对象:

ImageData { width=10, height=10, data=Uint8ClampedArray}

这个ImageData对象包括:width,height,以及一个像素信息数组data。

这个像素信息数组是重中之重。他包括red,green,blue,和alpha,且每个都是0-255的数值——连alpha也是。

这个data数组的大小由像素个数决定,即ImageData的width*height.如getImageData(1,1,1,1),那data就只有一个像素信息;而getImageData(1,1,10,10),则有10*10=100个。

而像素信息在data中是怎么保存的呢?本来我的理解,data可以是一个二维数组,每个元素就是一个数组,每个元素保存一个像素信息。 继续阅读Html5 canvas画图教程22:获取与操作像素信息getImageData

Html5 canvas画图教程21:阴影shadow

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

canvas也能画出阴影,也就是投影效果。

上节课我讲了在canvas中“写字”的方法,阴影和字体一样需要设置,但设置的方式却大相径庭。

字体的设置由一个font包办,而阴影却不能用一个shadow来垄断。

canvas的阴影有4个分开的设置项:

属性 描述
shadowOffsetX 阴影的水平偏移,单位是数字,可以是值.
shadowOffsetY 阴影的垂直偏移,单位是数字,可以是值.
shadowBlur 阴影的模糊度,单位是数字.
shadowColor 阴影的颜色

其中的shadowOffsetX,shadowOffsetY,的单位都是数字,而不是’2px’这样的字符串。

我们用上节课的文字来加上阴影效果:

1
2
3
4
5
6
7
8
9
ctx.shadowColor = "#00f";
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 4;
ctx.font = "bolder 33px Arial menu";
ctx.fillStyle="#f00";
ctx.strokeStyle="#0f0";
ctx.fillText('1223',50,50);
ctx.strokeText('asdfsadf',150,50);

图中蓝色部分就是shadow。由图可知,当画出的图形是描边的,其阴影也是空心的,这点很不错。

分开设置是有好处的,比如只想改一下阴影颜色的话就只用改一下shadowColor即可。

另外,shadowColor支持rgba颜色模式,可以用来做半透明的阴影。

重要:beginPath不会消除阴影。当然,这才是正常的,如果每个新路径都要重新设置一下阴影,那才是麻烦。

如果我要让以后的图形变成没有阴影的状态,怎么办?用前面讲的save与restore.

另外,html5rock的研究表示,使用阴影的性能消耗较大,还是少用为妙——但并不是叫你不用哈

Html5 canvas画图教程20:在canvas里写字

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

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

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

他们不能产生路径

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

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

当然,这个弱爆了。默认画出来都是黑色的字体。 继续阅读Html5 canvas画图教程20:在canvas里写字

Html5 canvas画图教程19:canvas动画与HTML动画效率对比

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

上一篇讲动画原理的文章中,我说过要测试canvas动画的效率。说到做到!不过碰到一些让人尴尬的问题。

我由一个本来就有的html文件直接拖了两个副本出来,分别取名叫canvas版与html版,然后各自写了一个动画,但动画的外观是一样的,都是在一个800*600的区域中,一个红色正方形由左移动到右,周而复始——代码不重要,在文末。

由于chrome有任务管理器,可以查看各标签页的资源消耗情况,所以我是在chrome下测试的。

但还没开测就碰到个问题:canvas版的网页打开就有15000K的内存消耗,而html版的却只有7500K左右,我勒个去,这让我怎么测,这不是高下立判吗?

我把canvas版本的源码中JS删掉,甚至把canvas都删掉,结果打开时内存占用依然在10M以上,真是让人怒了。 继续阅读Html5 canvas画图教程19:canvas动画与HTML动画效率对比