妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 16048|回复: 21

妙味课堂--HTML5像素级操作

  [复制链接]
monica 发表于 2013-9-2 12:05:22 | 显示全部楼层 |阅读模式
发一枚课上讲的小实例:HTML5像素级操作(配合粒子思想实现)

效果截图:
QQ截图20130902120222.png

在线预览地址:
http://2013.miaov.com/miaov_demo/canvas-liz/canvas-liz.html

♥友情提示:如需源码,点击效果预览地址后,在页面上单击右键直接查看网页源代码即可!!

canvas 迷人的绘图板给了人们无限想象与实现创意的空间,在这个实例中,
我们尝试把“妙味课堂”这4个字以及 妙味课堂 logo 融入页面中,
以小圆点粒子的扩散-收缩方式展示在大家面前。

demo中运用到的知识点是:canvas、像素级操作、粒子操作(思想)、JS(必不可少哈~)
制作步骤:
1、将准备好的图片添加到canvas中;
2、通过像素级操作把图片透明区域与非透明区域区分;
3、绘制圆形、配合运动设置指定的非透明区域;

现在,大家可以将自己网站的 logo 或任何有剪影效果的图片通过这种方式展示出来,
色彩可任意搭配,制作各种绚丽的展示方式(设计师最爱哈~^ ^)
让观看你网站的用户们好好体会一下你的热情吧!





回复

使用道具 举报

创美易-miaov 发表于 2013-9-2 12:42:42 | 显示全部楼层
有没有录制视频教程?
回复 支持 反对

使用道具 举报

 楼主| monica 发表于 2013-9-2 13:26:09 | 显示全部楼层
创美易-miaov 发表于 2013-9-2 12:42
有没有录制视频教程?

暂时没有哈
回复 支持 反对

使用道具 举报

koko222 发表于 2013-9-2 13:35:06 | 显示全部楼层
啥时有视频啊?很期待
回复 支持 反对

使用道具 举报

 楼主| monica 发表于 2013-9-2 13:59:12 | 显示全部楼层
koko222 发表于 2013-9-2 13:35
啥时有视频啊?很期待

暂时没有出视频的打算哈,以后课上还会讲的哈
回复 支持 反对

使用道具 举报

创美易-miaov 发表于 2013-9-2 20:52:52 | 显示全部楼层
monica 发表于 2013-9-2 13:26
暂时没有哈

l留一手。。。。
回复 支持 反对

使用道具 举报

nikk81305 发表于 2013-9-3 18:26:46 | 显示全部楼层
第一次进去效果还好。第二次刷新后出问题
回复 支持 反对

使用道具 举报

小应勤 发表于 2013-9-3 20:34:48 | 显示全部楼层
( ⊙o⊙ )哇  我和我的小伙伴们都惊呆了~ HTML5 厉害!
回复 支持 反对

使用道具 举报

好豪好豪 发表于 2013-9-4 10:24:25 | 显示全部楼层
图片尺寸是不是有规定的?我换图片上去,没显示全
回复 支持 反对

使用道具 举报

ghostdp 发表于 2013-9-6 18:27:55 | 显示全部楼层
尺寸太大~像素就太多~所以没显示全是正常的~其中一个红色圆代表一个像素
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-4-26 20:57 , Processed in 0.159532 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表