[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API
[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]
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>
|
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
|
40
|
this.animating = false;
|
01
|
Kinetic_2d.prototype.isAnimating = function(){
|
02
|
03
|
return this.animating;
|
04
|
05
|
};
|
06
|
07
|
08
|
Kinetic_2d.prototype.getFrame = function(){
|
09
|
10
|
return this.frame;
|
11
|
12
|
};
|
13
|
14
|
Kinetic_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
|
36
|
Kinetic_2d.prototype.stopAnimation = function(){
|
37
|
38
|
this.animating = false;
|
39
|
40
|
};
|
41
|
42
|
Kinetic_2d.prototype.getTimeInterval = function(){
|
43
|
44
|
return this.timeInterval;
|
45
|
46
|
};
|
47
|
48
|
Kinetic_2d.prototype.getTime = function(){
|
49
|
50
|
return this.t;
|
51
|
52
|
};
|
53
|
54
|
Kinetic_2d.prototype.getFps = function(){
|
55
|
56
|
return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
|
57
|
58
|
};
|
59
|
60
|
Kinetic_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
|
};
|
转载于:https://www.cnblogs.com/webapplee/p/3771675.html
[HTML5]移动Web应用程序开发 HTML5篇 (四) 多媒体API相关推荐
- 移动Web应用程序开发HTML5篇
https://software.intel.com/zh-cn/blogs/2012/03/09/webhtml5-offline-web-applications 转载于:https://www. ...
- 第一章 Web应用程序开发基础
一.HTTP协议工作机制 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它是一种主流B/S架构中应用的通信 ...
- 【JavaScript UI库和框架】上海道宁与Webix为您提供用于跨平台Web应用程序开发的JS框架及UI小部件
Webix是Javascript库 一种软件产品 用于加速Web开发的 JavaScript UI库和框架 Webix用于跨平台Web应用程序开发的JS框架,为您提供102个UI小部件和功能丰富的CS ...
- 【使用Blazor构建web应用程序 .NET 6篇 上】
Build web applications with Blazor 使用Blazor构建web应用程序 .NET 6篇 上 使用Blazor构建web应用程序 第一节Introduction (介绍 ...
- 【使用Blazor构建web应用程序 .NET 6篇 中】
Build web applications with Blazor 使用Blazor构建web应用程序 .NET 6篇 中 使用Blazor构建web应用程序 第五节Exercise - Acces ...
- 【微信小程序开发学习篇】
微信小程序开发学习篇 概述 相关信息 笔记制作时间:2022-9-25 参考视频:黑马视频 参考文档:微信小程序官方开发文档 文章目录 微信小程序开发学习篇 概述 相关信息 小程序基础 1.数据绑定与 ...
- ASP.NET Core Web 应用程序开发期间部署到IIS自定义主机域名并附加到进程调试
想必大家之前在进行ASP.NET Web 应用程序开发期间都有用到过将我们的网站部署到IIS自定义主机域名并附加到进程进行调试. 那我们的ASP.NET Core Web 应用程序又是如何部署到我们的 ...
- Visual C#.Net网络程序开发-Tcp篇（1）
Visual C#.Net 网络程序开发-Socket篇 Visual C#.Net网络程序开发-Tcp篇(1) Visual C#.Net网络程序开发-Tcp篇(2) Visual C#.Net网络 ...
- [渝粤教育] 商丘职业技术学院 Java Web应用程序开发 参考 资料
教育 -Java Web应用程序开发-章节资料考试资料-商丘职业技术学院[] 简述B/S结构和C/S结构,各自的优缺点? web前端基础 第1单元 网上书店系统开发准备 1.[单选题]主流的动态网页技 ...
最新文章
- 佐治亚理工学院发文：不要迷信可解释性，小心被误导
- SpringMVC背景介绍及常见MVC框架比较
- SelectBox插件
- 关于C#（ASP.net）存取MySQL LongText字段的心得[转]
- 【Python】扫盲帖：关于在Windows、Linux和Mac上安装设置Python的问题
- 当滑动时隐藏Actionbar
- ubuntu切换JDK版本
- python格式字符_python格式字符
- 计算机主机组成部分和功能,电脑的组成部分及作用
- ectouch第六讲 之表常用链接
- “技术需求”与“技术成果”项目之间关联度计算模型top1
- 技术选型和知识点介绍（下）
- word表格三线表线宽度
- pandas 空值填充
- 按键精灵手机助手之以图找图
- 高级计算机器,高级计算器最新版
- 如何将瀚高数据库单机数据导入HGDW
- 华为畅享8plus停产了吗_华为畅享8和Plus哪个好？ 华为畅享8 Plus与畅享8区别对比评测...
- 1419：SPFA(II)
- pythonwhile嵌套if_python中for、while循环、if嵌套的使用