html5 canvas 与小丑。

介绍

  以前开发动画应用你可能需要学习很复杂的动画制作框架。自从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 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

42140
来自专栏IMWeb前端团队

CSS StickyFooter——当内容不足一屏时footer紧贴底部

一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时f...

24570
来自专栏前端知识分享

第123天:移动web开发中的常见问题

准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。 手机端页面自适应解决方案—rem布局进阶...

19020
来自专栏KK的小酒馆

android.support.v7.widget.SwitchCompat

SwitchCompat是符合谷歌Material design的Selection control组件,与传统的Switch以及ToggleButton不同,...

47430
来自专栏二次元

用CSS3绘制iPhone手机

本博客所有文章如无特别注明均为原创。作者:阿珏 ,复制或转载请以超链接形式注明转自 阿珏博客 。 原文地址《用CSS3绘制iPhone手机》

14100
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

11430
来自专栏图像识别与深度学习

《Android》Lesson10-UI控件

24790
来自专栏HTML5学堂

Form表单 问题多多(中)

HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器...

37150
来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

30540
来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

28990

扫码关注云+社区

领取腾讯云代金券