【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面-阿里云开发者社区

开发者社区> 开发与运维> 正文

【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如需转载请自行联系原作者

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章