HTML5学习记录-----canvas学习动画快照_H5之家 - 中国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> <input type="button" value="快照"/> </div> <img/> <canvas></canvas> </body> <script src="clock.js"></script> </html>