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的代码 

posted @   Giant150  阅读(2527)  评论(5)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae