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
上代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
都看完了,你确定不点个赞再走?