【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面

导航

【初探HTML5之使用新标签布局】用html5布局我的博客页！

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？

【HTML5初探之本地存储】如果没有数据库。。。

【HTML5初探之离线应用】如何打造零请求、无流量的网站？

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web Workers】网页也能多线程

【HTML5初探之Geolocation API】让我们来回去地理信息

 

绘制渐变图形

复制代码

fillStyle除了指定颜色外，还可以指定填充对象。

绘制线性渐变时，需要用到LinearGradient对象，创建函数为：

createLinearGradient(xStart, yStart, xEnd, yEnd)；

xStart为渐变起始横坐标

yStart为渐变起始纵坐标

xEnd为渐变结束横坐标

yEnd为渐变结束纵坐标

通过该方法可以创建一个使用两个坐标点的LinearGradient对象。

而后在通过addColorStop进行颜色设定：

addColorStop(offset, color)

offset为所设定颜色离开起始点的偏移量（0,1之间）

color为指定的颜色。

因为是渐变至少需要使用两次addColorStop方法。

最后将fillStyle设定为LinearGradient对象执行填充变可绘制图形了。

复制代码

绘制渐变图形

绘制径向渐变

径向渐变：沿着圆形的方向向外进行扩散渐变，比如沿着太阳半径方向扩散出去的光晕。

createRediaGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

radiusStart与radiusStart分别代表开始圆的半径与结束圆的半径

径向渐变

 绘制变形图形

 我们有时会遇到这么一个功能：旋转相册、放大照片，这里就介绍如何变形图形：

translate(x, y)用于移动坐标轴原点，默认在左上角

scale(x, y)用于将图形放大，xy分别是各自坐标轴放大的倍数

rotate(angle)用于旋转图形，angle为角度值

平移扩大旋转图形

 

矩阵变换

复制代码

变换矩阵：专门用来实现图形变形，与坐标配合使用，达到变形的目的。

transform(m11, m12, m21, m22, dz, dy)方法可修改变换矩阵

该方法使用一个新的变换矩阵与当前变换矩阵进行乘法运算

m参数用以修改使用这个方法后，绘制图形的计算方法，以达到变形的目的；

dx与dy分别表示将坐标原点在各自坐标上移动对应单位

PS：这块我也看得模模糊糊的，据说需要掌握矩阵相关知识，我这里简述便是

复制代码

这块知识点，我没有搞明白，暂时不描述了。

 图形组合

 多个图形之间可能发生重合。后出现的会遮盖先出现的，有时我们想在上面做点操作，这里变提供了一个globalCompositeOperation属性决定图形组合方式。

 该属性文字很多，我这里直接上测试代码了：

图形组合

绘制阴影

绘制阴影只需设定以下属性：

shadowOffsetX

shadowOffsetY

shadowColor

shadowBlur 阴影模糊范围

我是一个阴影

使用图像

复制代码

绘制图像有以下几个方法：

drawImage(img, x, y)

drawImage(img, x, y, w, h)

drawImage(img, sx, sy, sw, sh, dz, dy, dw, dh)

前两个函数都很好理解，第三个我第一眼是没有看懂的：

sx\sy 分别代表源图像被复制区域在画布起始横坐标纵坐标

sw\sh 表示被复制被复制区域的高宽（即做图像局部复制）

dx\dy 表示被复制后的图像在画布上的位置

dw\dh 表示最后的高宽

复制代码

第一个和第二个就是是否缩放的差距：

上一张我的果照

指定高宽与不指定的区别。

第三个函数的使用，局部放大或者剪切的效果，只需要调整高宽缩放

局部剪切

图像剪切

刚刚那个剪切还是水的，接下来才是真正的剪切。。。

圆形裁剪

像素处理

Canvas api可以获取图像的每一个像素，并得到像素的rgb，使用函数为：

getImageData(sx, sy, sw, sh)

简单举个例子吧：

View Code

 

绘制文字

绘制带阴影的文字

保存与恢复状态

我们在图像剪切时有个问题，如果操作结束还想继续绘制，又不取消裁剪范围的话，急需要用到状态保存与恢复了。

api提供save与restore完成相关功能

其分别用于保存与恢复图形上下文的绘图状态。

文件保存

 我们画了很多图形，但是该如何保存呢？

保存为本地文件

我只想说，你好黑啊。。。。

简单的动画制作

学到这里，我突然开光了，我突然知道我最近在干什么了！！！

动画制作，使用这个东西可以动画制作，换句话说，做游戏可以用它来了哇？？？如此一来我突然就感觉这个东西着实改变了前端啊！！！

所谓动画就是不断的檫除重绘的过程

移动的矩形

该矩形会由左至右的运动。。。。

结语

就个人来说，Canvas这章估计是HTML5中比较枯燥的东西了，我学习过程中就不太提得起劲，完了里面很多图形都是要有一定数学知识的。

然后这章的函数之多，完了我猜不要多久我又会忘记。

但是：这章类容应该是相当重要的，因为最后制作动画时，我突然感觉是不是游戏就是需要他呢？？？于是马上去查了下资料：

分享29款基于 HTML5 Canvas 开发的网页游戏

于是老夫找到了此篇文章，才感觉到其真正用途，看来以后该知识点必须牢牢掌握好好运用啊！！！！ 

本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/04/19/3029603.html如需转载请自行联系原作者