html5 canvas 与小丑。
来源:互联网 发布:淘宝上买欧普具靠谱吗 编辑:程序博客网 时间:2024/04/27 18:03
介绍
以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。
而文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。
我们需要了解Canvas中的几个API,然后使用需要的动画参数,就能制作出这个有趣又能响应你的动作的Web动画。把鼠标放到上面的小丑脸上,然后移开,看看会发生效果。
基本结构
KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上,比如最常用的< div >标签。浏览器最终显示的就是这些用户层的叠加效果。
绘制界面
现在我们开始用Kinetic制作我们的画面。
Kinetic绘图的基本的流程可以如下图所示:
首先是创建一个HTML5页面,在里添加对Kinetic库的引用:
<script type="text/javascript" src="kinetic-v5.1.0.min.js"></script>
在中添加一个用于绑定到Kinetic用于创建舞台的容器,比如说可以是个 < div >:
<div id="“container”"></div>
在页面加载时进行绘图
window.onload = function() { // 定义全局变量 var sw = 578; var sh = 400; //创建Kinetic舞台,绑定我们添加的<div>容器 var stage = new Kinetic.Stage({ container : “container”, //<div>的id width : 578, //创建的舞台宽度 height : 400 //创建的舞台高度 }); //创建Kinetic用户层 var layer = new Kinetic.Layer();}</div></div>
绘制左眼、右眼
首先我们需要先创建Kinetic对象,并调用Line()方法,进行绘制。
使用kinetic工具包中的方法,绘制左右眼
// 创建一个Kinetic线形对象var leftEye = new Kinetic.Line({ x: 150, // x轴位置 points: [0, 200, 50, 190, 100, 200, 50, 210], // 位置点 tension: 0.5, // 线条弹性 closed: true, stroke: 'white', // 线条颜色 strokeWidth: 10 // 线条宽度});
// 创建一个Kinetic线形对象var rightEye = new Kinetic.Line({ x: sw - 250, points: [0, 200, 50, 190, 100, 200, 50, 210], tension: 0.5, closed: true, stroke: 'white', strokeWidth: 10 });// 向用户层中添加上面的线形layer.add(leftEye).add(rightEye);// 将上面的用户层添加到舞台上stage.add(layer);
绘制鼻子和嘴巴
绘制鼻子和嘴巴
var nose = new Kinetic.Line({ points: [240, 280, sw/2, 300, sw-240,280], tension: 0.5, closed: true, stroke: 'white', strokeWidth: 10});var mouth = new Kinetic.Line({ points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh], tension: 0.5, closed: true, stroke: 'red', strokeWidth: 10});
左右眼动画
让小丑的左右眼能够动起来,需要监听事件,用到两事件指针位于元素上方时(mouseover),鼠标从元素上移开时(mouseout),执行动画操作。
var leftEyeTween = new Kinetic.Tween({ node: leftEye, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, y: -100, points: [0, 200, 50, 150, 100, 200, 50, 200]});var rightEyeTween = new Kinetic.Tween({ node: rightEye, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, y: -100, points: [0, 200, 50, 150, 100, 200, 50, 200]});
鼻子和嘴巴动画
var noseTween = new Kinetic.Tween({ node: nose, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, y: -100, points: [220, 280, sw/2, 200, sw-220,280]}); var mouthTween = new Kinetic.Tween({ node: mouth, duration: 1, easing: Kinetic.Easings.ElasticEaseOut, points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
更多内容如时钟效果、 图像缩放和裁剪、Canvas简单实用的图表 - Chart.js
请参见: http://hubwiz.com/course/55adf42f3ad79a1b05dcbff0/
0 0
- html5 canvas 与小丑。
- HTML5 canvas 之 小丑鱼
- HTML5----kinetic,CSS3(Canvas)--小丑动画
- 小丑
- 小丑
- HTML5中Canvas与SVG的比较
- HTML5 Canvas鼠标与键盘事件
- HTML5 Canvas渐进填充与透明
- html5 canvas 图像转换与缩放
- HTML5的图像系统Canvas与SVG
- HTML5学习(六)---------SVG 与Canvas
- HTML5中Canvas与SVG的画图
- html5 canvas学习--操作与使用图像
- SVG 与 HTML5 的 canvas 优缺点
- canvas与html5实现视频截图功能
- HTML5 SVG与Canvas的区别
- HTML5 canvas电子签名与截图
- html5 canvas
- 关于从0开始学习计算机的看法
- Pro Git(中文版)
- git只clone仓库中指定子目录和指定文件的实现20151020
- Android四大基本组件介绍与生命周期
- Python filter map练习
- html5 canvas 与小丑。
- 数据持久化
- BitLocker Repair Tool - Recover Drive in Windows 7 and 8
- 基于.Net平台开发的网页版实时聊天程序
- Swift 教程:快速入门
- Linux必学的60个命令
- H1N1
- 创业泡沫的"军功章",高薪低能的程序员要分走一半
- 上传文件到github的方法