HTML5学习记录-----canvas学习之动画快照

JavaSam

浏览: 951683 次
性别:
来自: 北京

最近访客更多访客>>

chyunfan

lversony

zwj1030711290

zl_dream1106

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
canvas
HTML5

canvas动画快照
欢迎大家有好点建议可以提。js高级扣扣群：170798851 欢迎来交流学习

git项目地址：https://github.com/Jonavin/HTML5_Study

重点思路：

snapshotBtn.onclick = function(e){
        var dataUrl;
        if(snapshotBtn.value === "快照"){
            dataUrl = cvs.toDataURL();//重点方法
            clearInterval(loop);
            snapshotImg.src = dataUrl;
            snapshotImg.style.display = "inline";
            cvs.style.display = "none";
            snapshotBtn.value="恢复";
        }else{
            cvs.style.display  = "inline";
            snapshotImg.style.display  = "none";
            loop = setTimeout(function(){
                _functions.drawClock.call(_functions);
            },1000);
            snapshotBtn.value="快照";
        }
    }

/**
 * Created by wsf on 2014-11-22.
 */
(function(win){
    "use strict";
    var doc = win.document,cvs = doc.getElementById("canvas"),ctx = cvs.getContext("2d"),
        WIDTH = cvs.width,HEIGHT = cvs.height,
        FONT_HEIGHT=3,MARGIN=160,HAND_TRUNCATION = WIDTH/10,
        HOUR_HAND_TRUNCTION = WIDTH/10,NUMERAL_SPACING = 20,
        RADIUS = WIDTH/2-MARGIN,HAND_RADIUS=RADIUS+NUMERAL_SPACING,
        numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
        snapshotBtn = doc.getElementById("snapshotBtn"),
        snapshotImg = doc.getElementById("snapshotImg"),
        loop;

    /**
     * 画图函数
     * @type {{}}
     */
    var _functions = {
        //画外层圆形
        drawCircle:function(){
            ctx.beginPath();//开始路径
            ctx.arc(WIDTH/2,HEIGHT/2,RADIUS,0,Math.PI*2,true);
            ctx.stroke();
        },
        //画钟表刻度
        drawNumerals:function(){
            var angle = 0,numeralWidth = 0;
            numerals.forEach(function(numeral){
                angle = Math.PI/6*(numeral-3);
                numeralWidth = ctx.measureText(numeral).width;
                ctx.fillText(numeral,WIDTH/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,HEIGHT/2+Math.sin(angle)+(HAND_RADIUS)+FONT_HEIGHT/3);
            });
        },
        //画中间圆心
        drawCenter:function(){
            ctx.beginPath();
            ctx.arc(WIDTH/2,HEIGHT/2,5,0,Math.PI*2,true);
            ctx.fill();//实心
        },
        //画钟表指针
        drawHand:function(loc,isHour){
            var angle = (Math.PI*2)*(loc/60)-Math.PI/ 2,
                handRadius = isHour?RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCTION:RADIUS-HAND_RADIUS;
            ctx.moveTo(WIDTH/2,HEIGHT/2);//改变圆点坐标
            ctx.lineTo(WIDTH/2+Math.cos(angle)*handRadius,HEIGHT/2+Math.sin(angle)*handRadius);
            ctx.stroke();
        },
        //画所有的钟表指针
        drawHands:function(){
            var _d = new Date,_h = _d.getHours(),
                _h = _h>12?_h-12:_h;
            this.drawHand(_h*5+(_d.getMinutes()/60)*5,true);
            this.drawHand(_d.getMinutes(),false);
            this.drawHand(_d.getSeconds(),false);
        },
        //画钟表主函数
        drawClock: function () {
            ctx.clearRect(0,0,WIDTH,HEIGHT);//清空画布
            this.drawCircle();
            this.drawCenter();
            this.drawHands();
            //this.drawNumerals();
        }
    }

    ctx.font = FONT_HEIGHT+"px";
    loop = setInterval(function(){
        _functions.drawClock.call(_functions);
    },1000);

    /**
     * 重点思路
     * @param e
     */
    snapshotBtn.onclick = function(e){
        var dataUrl;
        if(snapshotBtn.value === "快照"){
            dataUrl = cvs.toDataURL();//重点方法
            clearInterval(loop);
            snapshotImg.src = dataUrl;
            snapshotImg.style.display = "inline";
            cvs.style.display = "none";
            snapshotBtn.value="恢复";
        }else{
            cvs.style.display  = "inline";
            snapshotImg.style.display  = "none";
            loop = setTimeout(function(){
                _functions.drawClock.call(_functions);
            },1000);
            snapshotBtn.value="快照";
        }
    }

})(window);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas钟表</title>
    <style>
        body{
            background: #ddd;
        }
        body{
            background: #aaaaaa;
        }
        #canvas{
            position: absolute;
            left:10px;
            top:1.5em;
            margin:20px;
            border: thin solid dodgerblue;
            background: #fff;
        }
        #snapshotImg{
            position: absolute;
            display: none;
            left: 10px;
            top:1.5em;
            margin:20px;
            border: thin solid dodgerblue;
            background: #fff;
        }
    </style>
</head>
<body>
  <div id="controls">
      <input type="button" id="snapshotBtn" value="快照"/>
  </div>
  <img id="snapshotImg"/>
  <canvas id="canvas" width="500" height="300"></canvas>
</body>
<script src="clock.js"></script>
</html>

0
顶

0
踩

分享到：

javascript判断字符串是否是回文的算法实现 | HTML5学习记录-----canvas学习之鼠标选取 ...

2014-11-24 21:33
浏览 1187
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5学习记录-----canvas学习之动画快照

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5学习记录-----canvas学习之动画快照

评论

发表评论

相关推荐

微信2.0分享自定义标题、图片、摘要、链接

js验证正则大全

javascript判断字符串是否是回文的算法实现

HTML5学习记录-----canvas学习之鼠标选取放大图像

HTML5学习记录-----canvas学习之获取鼠标在canvas上的坐标位置

HTML5学习记录-----canvas学习之钟表

ajax.js

html5 规范中新增的api

被Arguments对象坑了。

input onpaste事件

javascript正则表达式学习——顺序肯定环视，顺序否定环视

javascript小工具之——cookie操作

javascript本地缓存之localStorage，sessionStorage等

javascript本地缓存之userData（ie专用）

javascript 排序，分组小工具 - 支持JSON数组 原生数组（学习，持续更新）

javascript 计算两日期之间的天数

web版2048小游戏 --- 学习用

javascript 将HTML转为 word，pdf 等（ie）

javascript实现的各种排序性能比较

javascript自动补全 支持键盘上下键 可以自定义数据，处理函数

最近访客更多访客>>

javascript 排序，分组小工具 - 支持JSON数组原生数组（学习，持续更新）

javascript自动补全支持键盘上下键可以自定义数据，处理函数