HTML5学习之Canvas标记试例
html5当道.到处都是关于html5的新闻和报道.感觉自己还不去了解下html5就真的快敢不上时代的步伐了
所以今天星期六.放假休息在家.没事看了下网上的相关博客.还有一些试例.
只不过看归看.不自己动手还是像在喝鸡汤--不经过大脑的.
html5新加了很多标记和相关的功能.
什么Web Sql DataBase,Web Storage,Web Socket等相关功能
还有一些新标记:Canvas,声音,视频等.......
今天我主要也就看了下Canvas标记,所以自己也来写写Demo.
由于才开始学习.所以问题也会有很多.希望大家手下留情.
主要学习还是看了下mozilla发布的一个Canvas:https://developer.mozilla.org/cn/Canvas_tutorial
自己就做了一个小试例.只不过在Canvas标记中还只主要用到一个方法.其它很牛的方法也慢慢学习之中
下面的例子是我用Canvas的drawImage方法做的一个图片切换效果
演示地址1: http://liuju150.cacacoo.com/ImageSwitchUp.htm
演示地址2:http://liuju150.cacacoo.com/ImageSwitch.htm
Web Sql DataBase示例:http://liuju150.cacacoo.com/WebSql.htm
上代码:
View Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var _LoadImage = []; ///<summary>加载完成的Image对像数组</summary>
var _NextImageIndex = 0; ///<summary>下次要显示的图片在_LoadImage的索引位置</summary>
function LoadImageURL(ImageCount) {
///<summary>初始化的时候要得到所有图片的地址</summary>
///<param name="ImageCount" type="number">图片的个数</param>
var _InitImageURL = [];
for (var i = 0; i < parseInt(ImageCount); i++) {
var _url = "Image/" + (i + 1).toString() + ".jpg";
_InitImageURL.push(_url);
}
LoadImage(_InitImageURL);
}
function LoadImage(ImageURL) {
///<summary>用图片地址初始化Image对像</summary>
///<param name="ImageURL" type="array">图片的地址数组</param>
while (ImageURL.length != 0) {
var img = new Image();
img.src = ImageURL.pop();
img.onload = function () {
_LoadImage.push(this);
PushMsg("Push _LoadImage:" + this.src);
if (_LoadImage.length == 11) {
ImageSwitch.Images = _LoadImage;
ImageSwitch.Canvas = document.getElementById("CanvasSwitch");
ImageSwitch.Show();
}
}
}
}
function PushMsg(message) {
///<summary>日志输出</summary>
///<param name="message" type="string">日志内容</param>
var _span = document.createElement("span");
_span.innerText = message;
var msg = document.getElementById("msg");
msg.appendChild(_span);
var _br = document.createElement("br");
msg.appendChild(_br);
}
window.onload = function () {
LoadImageURL(11);
}
var ImageSwitch = new Object();
ImageSwitch.WidthCount = 11;//在X坐标上分成几等份
ImageSwitch.HeightCount = 8;//在Y坐标上分成几等份
ImageSwitch.Canvas = new Object();//Canvas标记对象
ImageSwitch.Images = [];//要显示的图片对象
ImageSwitch.NextImageIndex = 0;//下个要显示的图片对象在Images中的索引位置
ImageSwitch.SwitchTime = 1000;//图片切换效果用时(1S=10000)
ImageSwitch.ShowTime = 2000; //一个图片坐切换开始到切换另一个图片所用的时间
ImageSwitch.isHeightType = true;//true:以垂直方向显示,false:以水平方向显示
ImageSwitch.Current = new Object();
ImageSwitch.Show = function () {
if (!this.Canvas.getContext) {
return;
}
ImageSwitch.Current.CurWidth = 0;
ImageSwitch.Current.CurHeight = 0;
this.Canvas.getContext("2d").drawImage(this.Images[this.NextImageIndex], 0, 0);
this.NextImageIndex = (this.NextImageIndex + 1) % this.Images.length;
this.DrawImage();
}
ImageSwitch.DrawImage = function () {
var _ctx = this.Canvas.getContext("2d");
var _imageSW = this.Canvas.width / this.WidthCount;
var _imageSH = this.Canvas.height / this.HeightCount;
var _imageSX = _imageSW * this.Current.CurWidth;
var _imageSY = _imageSH * this.Current.CurHeight;
_ctx.drawImage(this.Images[this.NextImageIndex], _imageSX, _imageSY, _imageSW, _imageSH, _imageSX, _imageSY, _imageSW, _imageSH);
if (this.isHeightType) {
this.Current.CurHeight = (this.Current.CurHeight + 1) % this.HeightCount;
if (this.Current.CurHeight == 0) {
this.Current.CurWidth = (this.Current.CurWidth + 1) % this.WidthCount;
}
} else {
this.Current.CurWidth = (this.Current.CurWidth + 1) % this.WidthCount;
if (this.Current.CurWidth == 0) {
this.Current.CurHeight = (this.Current.CurHeight + 1) % this.HeightCount;
}
}
if (this.Current.CurWidth == 0 && this.Current.CurHeight == 0) {
this.NextImageIndex = (this.NextImageIndex + 1) % this.Images.length;
setTimeout(function () { ImageSwitch.DrawImage(); }, this.ShowTime - (this.SwitchTime / (this.WidthCount * this.HeightCount)));
} else {
setTimeout(function () { ImageSwitch.DrawImage(); }, this.SwitchTime / (this.WidthCount * this.HeightCount));
}
}
function ChangeType() {
ImageSwitch.isHeightType = !ImageSwitch.isHeightType;
}
</script>
</head>
<body>
<div>
<canvas id="CanvasSwitch" width="275" height="200"></canvas>
</div>
<div><input type="button" value="切换显示方式(水平/垂直)" onclick="ChangeType()" /></div>
<div id="msg"></div>
</body>
</html>
下面是有关Web Sql DataBase的代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<style type="text/css">
*{
margin:0;
}
</style>
<script src="JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function jData() {};
jData.prototype.Open = function (Name, Version, Description, size, CallBack) {
///<summary>打开/创建数据库上下文对象</summary>
///<param name="Name" type="string">数据库名称</param>
///<param name="Version" type="string">数据库版本,默认1.0</param>
///<param name="Description" type="string">描述</param>
///<param name="size" type="number">数据库大小(最大5M:5*1024*1024)</param>
///<param name="CallBack" type="function">回调</param>
///<returns type="DataBase" >数据库下下文对象</returns>
return window.openDatabase(Name, Version, Description, size, CallBack(this));
}
jData.prototype.executeSql = function (DataBaseContext, SqlString, SqlPramary, SuccessCallBack, ErrorCallBack) {
///<summary>打开/创建数据库上下文对象</summary>
///<param name="DataBaseContext" type="DataBaseContext">数据库上下文对象(Open)</param>
///<param name="SqlString" type="string">Sql语句</param>
///<param name="SqlPramary" type="array">参数(?)</param>
///<param name="SuccessCallBack" type="function">成功回调</param>
///<param name="ErrorCallBack" type="function">错误回调</param>
///<returns type="void">用回调</returns>
DataBaseContext.transaction(function (tran) {
tran.executeSql(SqlString, SqlPramary, function (tran, SuccessResult) {
SuccessCallBack(SuccessResult);
}, function (tran, ErrorResult) {
ErrorCallBack(ErrorResult);
});
}, function (ErrorTran) {
}, function () {
});
}
function OpenDataBaseCallBack(DataBase) {
}
var j = new jData();
var DataBaseContext = j.Open("TestDataBase", "1.0", "test Db", 2 * 1024 * 1024, OpenDataBaseCallBack);
function GetAllTableName() {
document.getElementById("ShowMain").innerHTML = "";
ShowTableData("sqlite_sequence");
var SqlStr = "select * from sqlite_sequence order by seq";
j.executeSql(DataBaseContext, SqlStr, [], function (result) {
for (var i = 0; i < result.rows.length; i++) {
ShowTableData(result.rows.item(i).name);
}
}, function (Error) {
fun_ErrorCallBack(Error);
});
}
function ShowTableData(TableName) {
var SqlStr = "select * from " + TableName;
j.executeSql(DataBaseContext, SqlStr, [], function (result) {
if (result.rows.length > 0) {
var html = "<div style=\"color:blue;\">" + TableName + "</div><table><thead><tr>";
var firstRow = result.rows.item(0);
for (var Column in firstRow) {
html += "<th>" + Column + "</th>";
}
html += "</tr></thead><tbody>";
for (var i = 0; i < result.rows.length; i++) {
var _row = result.rows.item(i);
html += "<tr>";
for (var val in _row) {
html += "<td>" + _row[val] + "</td>";
}
html += "</tr>";
}
html += "</tbody></table>";
$("#ShowMain").append(html);
}
}, function (Error) {
fun_ErrorCallBack(Error);
});
}
function fun_ErrorCallBack(ErrorMsg) {
document.getElementById("SpanErrorMsg").innerHTML = ErrorMsg.message;
}
window.onload = function () {
var SqlStr = "drop table Company;";
j.executeSql(DataBaseContext, SqlStr, [], function (res) { }, function (res) { alert(res.message); });
SqlStr = "create table Company(id integer primary key autoincrement,CompanyName text,CompanyNo text,RecordStatus text default 'Active');";
j.executeSql(DataBaseContext, SqlStr, [], function (res) { }, function (res) { alert(res.message); });
for (var i = 1; i < 10; i++) {
SqlStr = "insert into Company(CompanyName,CompanyNo) values(?,?);";
j.executeSql(DataBaseContext, SqlStr, [i.toString() + "Company", "CNO" + i.toString()], function (res) { }, function (res) { alert(res.message); });
}
GetAllTableName();
}
function btnRunSqlClick() {
document.getElementById("SpanErrorMsg").innerHTML = "";
var SqlStr = document.getElementById("textSQLCommand").value;
if (SqlStr.length == 0) { return; }
j.executeSql(DataBaseContext, SqlStr, [], function (result) {
GetAllTableName();
}, function (Error) {
fun_ErrorCallBack(Error);
});
}
</script>
</head>
<body>
<form id="form1">
<div>
<h1>Web Sql DataBase</h1>
<span>这是html5中的新技术.请用支持html5的浏览器打开</span><br />
<span>Web Sql DataBase支持在本地(不在服务器)的一个数据库,可以用脚本进行读写</span><br />
<span>下面的例子是我在本地创建了一个数据库,创建了Company表.并插入了几条数据</span><br />
<span>你可以在textarea中写相关的SQL来操作这些数据(create,drop,insert,update,delete....)</span><br />
<span>注意:没有数据的表是不会显示出来,你插入一条数据就可以看到这个表</span><br />
</div>
<div>
<textarea id="textSQLCommand" style="width:80%;float:left;" rows="8" cols="80"></textarea>
<input id="btnRunSql" type="button" value="运行" style=" width:15%;height:135px; font-size:xx-large;" onclick="btnRunSqlClick()" />
</div>
<div><span style="color:Red;" id="SpanErrorMsg"></span></div>
<div>
<span>语法堂</span><br />
<span>insert into Company(CompanyName,CompanyNo) values('10Company','CNO10')</span><br />
<span>create table Employee(id integer primary key autoincrement,EmployeeName text,EmployeeNo text,CompanyID integer,EmployeeSex text,EmployeeAge integer,RecordStatus text default 'Acitve')</span><br />
<span>insert into Employee(EmployeeName,EmployeeNo,CompanyID,EmployeeSex,EmployeeAge) values('LiuJu01','EMP01',1,'Boy',23)</span><br />
</div>
<div id="ShowMain"></div>
</form>
</body>
</html>
都看完了，你确定不点个赞再走？
