请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程Canvas

Canvas

对HTML5 Canvas应用的思考
下面对我们在实际开发中对Canvas应用的具体环境和情况作出的一个思考,在HTML5被越来越多的技术人员和公司接受后,大量的应用开始在Canvas上开发和设计,但是,我们认为并不是所有的地方都必须用Canvas才可以做出好 ...
2013-12-16 09:54
HTML5 Canvas的一些经验
HTML5 Canvas的一些经验
回答两个问题在这里,我们要郑重提醒一些已经学习了Canvas的读者,在设计应用的时候做足相关的技术理论准备工作,在一些基本的问题上花费一些时间,可以避免重大缺陷,并能创造更加令人惊艳的效果。大家想一下两个问 ...
2013-12-16 09:50
HTML5 Canvas事件感应
HTML5 Canvas事件感应
在实际的开发过程中,对于Canvas来说,某一区域的鼠标事件感应是一件非常重要而常见的需求,本节会提供一个感应事件的示例代码。在下面代码中,我们对整个Canvas的click和mouseover事件进行了监听,并在此事件执行时 ...
2013-12-16 09:38
HTML5 Canvas像素操作
HTML5 Canvas像素操作
本文介绍Canvas中强大的像素操作功能。这是非常有价值的一个功能,有了这一功能,就可以直接访问Canvas底层像素数据。注意 由于人们可以直接操纵像素数据,因此出现了某些人利用从Canvas直接获取并且修改数据的能力 ...
2013-12-15 19:01
HTML5 Canvas裁剪clip()
HTML5 Canvas裁剪clip()
裁剪(即clip())是渲染上下文中的绘制方法之一。很多人都以为这是一个清除概念,其实是错的。虽然从表现上看像清除,但是由于剪切区域由绘图路径设定,因此这是一个独立的显示区域。在Canvas动画中,裁剪区域之外的 ...
2013-12-15 18:51
HTML5 Canvas图形叠加(合成)
本文介绍的组合其实就是两个或以上的图形绘制在一起(或“合成”)时所产生的效果。默认的情况是,最后绘制的图形覆盖先前绘制的图形。在Canvas中有12个组合类型,这些类型用属性globalCompositeOperation来设置,下 ...
2013-12-15 18:44
HTML5 Canvas变形
HTML5 Canvas变形
变形(即transform())是一个不太常用的方法。在介绍此方法之前,有必要向读者介绍一下变形矩阵的概念(这里涉及图形学知识,若无兴趣可以跳过)。在数学上,矩阵是指纵横排列的二维数据表格,最早来自方程组的系数 ...
2013-12-15 18:39
HTML5 Canvas旋转和缩放
Canvas旋转在实际开发中,往往需要从多个角度旋转一个元素,使之呈现另外一种状态。接下来我们要熟悉的就是rotate(angle)方法,angle是旋转的角度,旋转的中心是Canvas坐标系统原点。最关键的是,我们可以通过transl ...
2013-12-15 18:33
HTML5 Canvas坐标转换
HTML5 Canvas坐标转换
在Canvas绘图过程中,坐标始终是从左上角的起始位置开始的。但是,在实际的开发中,常常有多个元素的坐标系统混合在一起,translate()是一个非常有用的转换元素坐标的方法。translate()方法的理解见下图:示例代码如 ...
2013-12-15 18:29
HTML5 Canvas绘图状态之保存和恢复
HTML5 Canvas绘图状态之保存和恢复
保存与恢复(即save()和restore())这两个方法在Canvas绘图状态中是极其重要的。 save()方法。在渲染上下文中,所有的Canvas状态都存储在栈里,当使用save()方法时,当前的绘图状态将被保存在栈中。 ...
2013-12-15 18:25
HTML5 Canvas阴影与透明
HTML5 Canvas阴影与透明
在学习过CSS3关于阴影部分的特效后,此处就非常简单了。阴影特效主要有以下几个属性。 shadowOffsetX = float shadowOffsetY = float shadowBlur = float shadowColor = color其中s ...
2013-12-15 17:14
HTML5 Canvas渐变特效
HTML5 Canvas渐变特效
渐变是在网页设计中经常出现的一种特效。在Canvas中,我们可以通过canvasGradient为线条和填充使用颜色渐变。在CSS3中也有类似的特效,这里就不详细讲解了。创建canvasGradient对象时,可以使用createLinearGradient ...
2013-12-15 17:10
HTML5 Canvas绘制文字
HTML5 Canvas绘制文字
在Canvas中,文字的显示也有两种方式,一种是用fillText(),另一种是用strokeText()。顾名思义,前者是填充式文本,后者是描绘式文本。这两者的区别是:填充式文本是实心的,描绘式文本是空心的。本文希望通过简单的 ...
2013-12-15 16:00
HTML5 Canvas绘制图片方法详解
HTML5 Canvas绘制图片方法详解
图片操作是Canvas极其重要的一部分功能。如果没有图片操作, Canvas就无法与大量的图片交互,无法产生绚丽的动画效果。在Canvas中,生成图片的方式有两种,一种是用drawImage()方法,它有3种参数格式;另一种是用cre ...
2013-12-15 15:47
HTML5 Canvas绘制圆与扇形
HTML5 Canvas绘制圆与扇形
canvas绘制圆形的过程也是画线围边的过程。与传统的Canvas不同,目前 Canvas没有fillarc()方法,因此只能采用下面这样的方式实现圆的绘制: ctx.fillStyle = "blue"; //填充色为蓝色 ctx.strokeStyle = "red ...
2013-12-15 15:37
12下一页

相关分类

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-21 08:56 , Processed in 0.057293 second(s), 15 queries .

返回顶部