[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API

介绍

 

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。

 

本篇是HTML5介绍的第三篇，主要介绍HTML5的Canvas API。

 

相关文章：

 

移动Web应用程序开发 HTML5篇 (一) HTML5简介

 

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

 

•1. Canvas API介绍

 

<canvas>是HTML5引入的一个新的元素，可以使用JavaScript来绘制图形、合成图象、以及做一些动画。<canvas>最先出现在Apple Mac OS X Dashboard中，也被应用于Safari，随着后来基于Gecko1.8的浏览器Firefox 1.5的加入变得流行起来，目前<canvas>是HTML 5标准规范的一部分。目前最新版本的主流浏览器都支持<canvas>，支持情况如下图：

 

 

•2. Canvas 入门

 

一个简单的Canvas例子，代码如下：

[xhtml]<!DOCTYPE HTML>

<html>

<canvas id="diagonal" style="border: 1px solid;" width="200" height="200">
</canvas>
</html>
<script>
function drawDiagonal() {
// Get the canvas element and its drawing context
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
// Create a path in absolute coordinates
context.beginPath();
context.moveTo(100, 140);
context.lineTo(140, 70);
// Stroke the line onto the canvas
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>[/xhtml]

代码运行效果如图，通过绝对坐标画出一条线：

 

 

Canvas把整个画布用坐标值进行了表示，左上角为（0，0），依次沿着X轴和Y轴延伸。坐标图如下所示：

 

 

再看一个例子：

 

01<html>
02 
03 <head>
04 
05  <script type="application/x-javascript">
06 
07    function draw() {
08 
09      var canvas = document.getElementById("canvas");
10 
11      if (canvas.getContext) {
12 
13        var ctx = canvas.getContext("2d");
14 
15 
16        ctx.fillStyle = "rgb(200,0,0)";
17 
18        ctx.fillRect (10, 10, 55, 50);
19 
20 
21        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
22 
23        ctx.fillRect (30, 30, 55, 50);
24 
25      }
26 
27    }
28 
29  </script>
30 
31 </head>
32 
33 <body onload="draw();">
34 
35   <canvas id="canvas" width="150" height="150"></canvas>
36 
37 </body>
38 
39</html>
 

 

运行效果如下图所示，分别创建了两个色块，对其进行颜色赋值和透明度设置：

 

 

相关代码 下载

 

•3. Canvas 动画

 

Canvas的动画功能是Flash的克星之一，结合了JavaScript和CSS3，可以说任何Flash能够做出的动画在Canvas中都可以实现。Canvas动画的原理和Flash类似：通过移动相应活动的图形来展示动画

 

如果是一个2D的canvas动画，那么在JavaScript中需要新建以下Object， 本例来源于KineticJS 2d JavaScript Library：

 

01    this.canvas = document.getElementById(canvasId);
02 
03    this.context = this.canvas.getContext("2d");
04 
05    this.drawStage = undefined;
06 
07    this.listening = false;
08 
09 
10    // Canvas Events
11 
12    this.mousePos = null;
13 
14    this.mouseDown = false;
15 
16    this.mouseUp = false;
17 
18 
19    // Region Events
20 
21    this.currentRegion = null;
22 
23    this.regionCounter = 0;
24 
25    this.lastRegionIndex = null;
26 
27 
28    // Animation
29 
30    this.t = 0;
31 
32    this.timeInterval = 0;
33 
34    this.startTime = 0;
35 
36    this.lastTime = 0;
37 
38    this.frame = 0;
39 
40this.animating = false;

 

其动画部分代码：
01Kinetic_2d.prototype.isAnimating = function(){
02 
03    return this.animating;
04 
05};
06 
07 
08Kinetic_2d.prototype.getFrame = function(){
09 
10    return this.frame;
11 
12};
13 
14Kinetic_2d.prototype.startAnimation = function(){
15 
16    this.animating = true;
17 
18    var date = new Date();
19 
20    this.startTime = date.getTime();
21 
22    this.lastTime = this.startTime;
23 
24 
25    if (this.drawStage !== undefined) {
26 
27        this.drawStage();
28 
29    }
30 
31 
32    this.animationLoop();
33 
34};
35 
36Kinetic_2d.prototype.stopAnimation = function(){
37 
38    this.animating = false;
39 
40};
41 
42Kinetic_2d.prototype.getTimeInterval = function(){
43 
44    return this.timeInterval;
45 
46};
47 
48Kinetic_2d.prototype.getTime = function(){
49 
50    return this.t;
51 
52};
53 
54Kinetic_2d.prototype.getFps = function(){
55 
56    return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
57 
58};
59 
60Kinetic_2d.prototype.animationLoop = function(){
61 
62    var that = this;
63 
64 
65    this.frame++;
66 
67    var date = new Date();
68 
69    var thisTime = date.getTime();
70 
71    this.timeInterval = thisTime - this.lastTime;
72 
73    this.t += this.timeInterval;
74 
75    this.lastTime = thisTime;
76 
77 
78    if (this.drawStage !== undefined) {
79 
80        this.drawStage();
81 
82    }
83 
84 
85    if (this.animating) {
86 
87        requestAnimFrame(function(){
88 
89            that.animationLoop();
90 
91        });
92 
93    }
94 
95};
读者可以从以下地址下载源码进行测试学习：下载地址。
更多的例子，
包括Canvas 3D动画，下载地址，Canvas动画是HTML5游戏开发最重要的工具，更多关于Canvas的信息将会和接下来的CSS3一起介绍。
本篇完。
参考资料："Pro. HTML5 Programing" http://www.kineticjs.com/ ...

 

转载于:https://www.cnblogs.com/webapplee/p/3771675.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/407708.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Taro+react开发（21）--注意参数格式

Taro+react开发（21）--注意参数格式

constructor() {super(...arguments);this.state {dataList: [],checkedList: [],isOpend: false,code: ""};}
阅读更多...
Vue基础之Vue模板语法

Vue基础之Vue模板语法

插值&#xff1a; 文本&#xff1a; 数据绑定最常见的形式就是使用 “Mustache” 语法&#xff08;双大括号&#xff09;的文本插值&#xff0c;双大括号会将数据解析成纯文本 Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时&#xff0c;绑定的数据对象…
阅读更多...
html头部尾部分离组件引入（JQ）

html头部尾部分离组件引入（JQ）

html写官网之类&#xff0c;我们经常会有很多页面同一头部和尾部&#xff0c;我们把它们分离出来&#xff0c;组件引入 vue等框架类的就不说了&#xff0c;主要是说html原生态的 &#xff08;如果是PHP文件可以直接include() 或 require() 函数引入html文件&#xff09; 用到JQ…
阅读更多...
[Oracle]使用滚动游标

[Oracle]使用滚动游标

源代码&#xff1a;xx.pc /*功能&#xff1a;演示了Oracle滚动游标操作定义游标时注意事项&#xff1a;1. DECLARE CURSOR语句必须是使用游标的第一条语句2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有前31个字符有效3…
阅读更多...
CMOS密码安全攻略

CMOS密码安全攻略

要说密码。首先就是CMOS密码了。CMOS(本意是指互补金属氧化物半体存储器&#xff0c;是一种大规模应用于集成电路芯片制造的原料)是电脑主板上的一块可读写的RAM芯片&#xff0c;主要用来保存当前系统的硬件配置。CMOS RAM芯片由系统通过一块后备电池供电&#xff0c;所以无论是…
阅读更多...
Taro+react开发（22）--模态框组件

Taro+react开发（22）--模态框组件

<AtModalisOpened{isOpend}title"标题"cancelText"取消"confirmText"确认"onClose{this.handleClose}onCancel{this.handleCancel}onConfirm{this.handleConfirm}content"确认删除吗"/>
阅读更多...
JQ trigger触发a标签点击事件

JQ trigger触发a标签点击事件

trigger() 方法触发被选元素的指定事件类型。 $("a").trigger(click) ;这样直接触发a标签上的点击事件无法生效 需要绑定给a标签的子集 $("a span").trigger(click) ;jq触发a标签跳转成功
阅读更多...
xmpp muc 群聊协议 3

xmpp muc 群聊协议 3

6. Entity Use Cases A MUC implementation MUST support Service Discovery [7]. 服务端必须实现 service discover 6.1 Discovering Component Support for MUC 发现服务器是否支持muc A Jabber entity may wish to discover if a service implements the Multi-User Chat pr…
阅读更多...
Vue基础之Class和Style绑定

Vue基础之Class和Style绑定

既然v-bind可以动态绑定标签的属性&#xff0c;那么也可以用v-bind来处理class和style&#xff0c;只需要计算出表达式最终的字符串。不过&#xff0c;字符串拼接麻烦又易错。因此&#xff0c;在 v-bind 用于 class 和 style 时&#xff0c; Vue.js 专门增强了它。表达式的结果…
阅读更多...
Pro*c使用滚动游标进行更新或删除游标行

Pro*c使用滚动游标进行更新或删除游标行

代码&#xff1a;xx.pc /* 功能&#xff1a;演示了Oracle滚动游标进行更新(或删除)操作定义游标时注意事项&#xff1a; 1. DECLARE CURSOR语句必须是使用游标的第一条语句 2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有…
阅读更多...
Silverlight学习笔记之使用TranslateTransform控制对象位置

Silverlight学习笔记之使用TranslateTransform控制对象位置

在Canvas中,除了直接使用Canvas.Top与Canvas.Left属性之外,我们可以使用TextBlock.RenderTransform的TranslateTransform的X与Y属性来控制文本显示的位置。代码如下&#xff1a;<TextBlockText"Hello TranslateTransform"Canvas.Left"34" Canvas.Top&qu…
阅读更多...
Taro+react开发（23）--componentWillReceiveProps

Taro+react开发（23）--componentWillReceiveProps

componentWillReceiveProps# void componentWillReceiveProps(object nextProps ) 当props发生变化时执行&#xff0c;初始化render时不执行&#xff0c; 在这个回调函数里面&#xff0c;你可以根据属性的变化&#xff0c;通过调用this.setState() 来更新你的组件状态&#xff…
阅读更多...
MVC Area Usage

MVC Area Usage

ASP.NET MVC Area操作 新建 Area&#xff1a;右键 -> Add –> Area继承 AreaRegistration&#xff0c;重写AreaName属性与RegisterArea方法 public class BookStudyAreaRegistration : AreaRegistration {public override string AreaName{get{return "BookStudy&qu…
阅读更多...
[Pro*c]滚动游标变量的使用

[Pro*c]滚动游标变量的使用

代码&#xff1a;xx.pc /* 功能&#xff1a;演示了Oracle滚动游标变量的使用定义游标时注意事项&#xff1a; 1. DECLARE CURSOR语句必须是使用游标的第一条语句 2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有前31个字…
阅读更多...
css裁剪clip-path画多边形

css裁剪clip-path画多边形

clip-path有三种属性 第一种 circle 画圆 clip-path: circle(30%); 30%为半径大小 clip-path: circle(50% at 50% 50%); 后面的50%为圆心位置 第二种 ellipse 椭圆 clip-path: ellipse(32% 43% at 49% 50%); 32%为宽 43%为高 后面两个49%&#xff0c;50%为圆心位置 第三种 p…
阅读更多...
教你培养成功的必备因素——强烈的企图心

教你培养成功的必备因素——强烈的企图心

企图心没有教&#xff0c;但是可以培养&#xff0c;我可以教你如何培养自己的企图心 有一次我上安东罗宾的课程&#xff0c;在夏威夷&#xff0c;安东罗宾的课程有很多世界第一名演讲&#xff0c;分享他们成为冠军的经验。安东罗宾请了一个马拉松选手&#xff0c;这个马拉松不是…
阅读更多...
Vue基础之Vue条件渲染

Vue基础之Vue条件渲染

v-if 在 Vue.js &#xff0c;我们使用 v-if 指令实现的功能 也可以用 v-else 添加一个 “else” 块 template-if 因为 v-if 是一个指令&#xff0c;需要将它添加到一个元素上。但是如果我们想切换多个元素呢&#xff1f;此时我们可以把一个<template>元素当做包装…
阅读更多...
React开发（100）:3.0没有image

React开发（100）:3.0没有image

./src/pages/Goods/Brand/index.js Module not found: Cant resolve antd/es/image in E:\shangjiahoutai\yoao-static-pc-merchant\src\pages\Goods\Brand
阅读更多...
pro*C/C++支持c++开发实例

pro*C/C++支持c++开发实例

Pro*C/C同时支持C和C&#xff0c;但是当预编译包含C代码的PC源程序时&#xff0c;必须合理地设置相关的预编译选项。 代码&#xff1a;xx.pc /*功能&#xff1a;演示了Pro*C/C源程序生成C源文件说明&#xff1a;Pro*C/C支持C和C。当预编译包含C代码的PC源程序时&#xff0c;必…
阅读更多...
用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

系统主菜单如下图所示&#xff1a; 首先&#xff0c;介绍下这个主菜单&#xff0c;它包含了一个动画logo以及一个按钮选项&#xff0c;动画logo每隔1秒钟切换一张图片&#xff0c;点击相应的按钮选项会切换不同的游戏场景。 下面看下这个界面的源码&#xff1a; /*** Power by …
阅读更多...
最新文章

Copyright @ 2022~2023