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>
相关推荐
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
html2canvas-1.0.0-rc.4版本
html5-canvas-loader.rar
html5-canvas-web-图片涂鸦
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
javascript - Canvas动画- 太空星球运动
文字粒子效果,通过canvas side的开发
海报合成 canvas vue组件 二维码合成 页面走命令可以直接运行 合成海报 商城的海报也ok ......
基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,...
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
html5-canvas-border-pixel-progressbar源码
html5-canvas-15-clock.zip
canvas-js-动画-例子
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
酷炫的动画效果
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip