-
html5 Canvas画图教程24：测量文字尺寸measureTe
measureText就是用来测量文字尺寸的，他 有返回值 。 ctx.measureText(text) measureText的返回值是一个对象，但里面只有一个属性： width ，本来文字的尺寸应该有width也有height，但canvas中的文字连行高都没有，所以measureText也没法得出高度。 所以说呢...
2015-09-07 14:23 -
Html5 canvas画图教程23:全局透明度globalAlpha
大家都知道html5里面可以使用rgba颜色，这对我们做半透明效果时非常有用。在canvas中，我们可以用rgba颜色来实现半透明填充或描边。 如果有下面的需求： 我要画N个图形，他们的颜色都不一样，但有个共同点是：所有图形都是50%半透明。 这时如果用rgba来实现...
2015-09-07 14:22 -
Html5 canvas画图教程22:获取与操作像素信息getI
getImageData的直译即获得图像数据，他的作用是从canvas中提取像素出来。所以，他是有返回值的。 语法及返回值 ctx.getImageData(x,y,width,height); 这就是他的语法。而他的返回值是一个ImageData对象： ImageData { width=10, height=10, data=Uint8Clampe...
2015-09-07 14:21 -
Html5 canvas画图教程21:画图阴影shadow
canvas也能画出阴影，也就是投影效果。 上节课我讲了在canvas中写字的方法，阴影和字体一样需要设置，但设置的方式却大相径庭。 字体的设置由一个font包办，而阴影却不能用一个shadow来垄断。 canvas的阴影有4个分开的设置项： 属性 描述 shadowOffsetX 阴影...
2015-09-07 14:20 -
Html5 canvas画图教程21:阴影shadow
canvas也能画出阴影，也就是投影效果。 上节课我讲了在canvas中写字的方法，阴影和字体一样需要设置，但设置的方式却大相径庭。 字体的设置由一个font包办，而阴影却不能用一个shadow来垄断。 canvas的阴影有4个分开的设置项： 属性 描述 shadowOffsetX 阴影...
2015-09-07 14:19 -
Html5 canvas画图教程20:在canvas里写字
文章写到现在才发现我忘了介绍在canvas上写字的方法，呃，这篇补上。 其实在canvas里写字是很简单的，他有两个原生方法，即 strokeText （描边文字）和 fillText （填充文字）一看就知道他们和strokeRect与fillRect是一伙的啦。 他们不能产生路径 。 他们的...
2015-09-07 14:19 -
Html5 canvas画图教程19:canvas动画与HTML动画效
上一篇讲动画原理的文章中，我说过要测试canvas动画的效率。说到做到！不过碰到一些让人尴尬的问题。 我由一个本来就有的html文件直接拖了两个副本出来，分别取名叫canvas版与html版，然后各自写了一个动画，但动画的外观是一样的，都是在一个800*600的区域...
2015-09-07 14:18 -
Html5 canvas画图教程18:动画原理解析
假设你的妹子，本来站在你面前一米，你叫她一声，她就过来抱住你，这个过程就是一个动画。动画的原理都是这样的，反正就是要动。 即使没接触canvas的时候，我们也用JS写过一些动画，比如常见的图片切换效果。产生动画的原因，是改变元素的形态，比如透明度，...
2015-09-07 14:16 -
Html5 canvas画图教程17:论beginPath的重要性
beginPath 这个canvas函数我很早就讲过了，他的作用很简单，就是开始一段新路径，我们先来看下面的一小段代码： 1 2 3 4 5 6 7 8 9 var ctx = document. getElementById ( cvs ) . getContext ( 2d ) ; ctx. beginPath ( ) ; ctx. moveTo ( 100.5 , 20.5 ) ;...
2015-09-07 14:16 -
Html5 canvas画图教程16:切割clip
此文讲一个之前提都没提但功能强大的方法，即clip clip的字面意思是切割，实际上他的功能也差不多这么个意思，但如果你学过flash，那我说他的功能相当于遮罩，那你估计就理解了。 clip的作用是依照前面创建的路径进行一次切割，然后所有在clip之后画的图形都...
2015-09-07 14:15
排行榜- 小强的HTML5移动开发之路（1）——
- 小强的HTML5移动开发之路（5）—
- HTML5中的FORM2.0
- 小强的HTML5移动开发之路（2）——
- html5 Canvas画图教程24：测量文字
- html5实例解析:开发web app的过程_
- html5 canvas 使用示例
- personalbusinessmodelcanvas.it在
- suyanxinsheng的课程
编辑推荐
关注我们
