离屏效果:
离屏非离屏并存效果
- <!DOCTYPE html>
- <!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- -->
- <html>
- <head>
- <title>Image Clock</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style>
- body {
- background: #dddddd;
- }
- #canvas {
- display: none
- }
- #snapshotImageElement {
- position: absolute;
- left: 10px;
- margin: 20px;
- border: thin solid #aaaaaa;
- }
- </style>
- </head>
- <body>
- <img id='snapshotImageElement'/>
- <canvas id='canvas' width='400' height='400'>
- Canvas not supported
- </canvas>
- <script>
- var canvas = document.getElementById('canvas'),
- context = canvas.getContext('2d'),
- snapshotButton = document.getElementById('snapshotButton'),
- snapshotImageElement = document.getElementById('snapshotImageElement'),
- FONT_HEIGHT = 15,
- MARGIN = 35,
- HAND_TRUNCATION = canvas.width/25,
- HOUR_HAND_TRUNCATION = canvas.width/10,
- NUMERAL_SPACING = 20,
- RADIUS = canvas.width/2 - MARGIN,
- HAND_RADIUS = RADIUS + NUMERAL_SPACING,
- loop;
- function drawCircle() {
- context.beginPath();
- context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI*2, true);
- context.stroke();
- }
- function drawNumerals() {
- var numerals = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
- angle = 0,
- numeralWidth = 0;
- numerals.forEach(function(numeral) {
- angle = Math.PI/6 * (numeral-3);
- numeralWidth = context.measureText(numeral).width;
- context.fillText(numeral,
- canvas.width/2 + Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,
- canvas.height/2 + Math.sin(angle)*(HAND_RADIUS) + FONT_HEIGHT/3);
- });
- }
- function drawCenter() {
- context.beginPath();
- context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);
- context.fill();
- }
- function drawHand(loc, isHour) {
- var angle = (Math.PI*2) * (loc/60) - Math.PI/2,
- handRadius = isHour ? RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCATION
- : RADIUS-HAND_TRUNCATION;
- context.moveTo(canvas.width/2, canvas.height/2);
- context.lineTo(canvas.width/2 + Math.cos(angle)*handRadius,
- canvas.height/2 + Math.sin(angle)*handRadius);
- context.stroke();
- }
- function drawHands() {
- var date = new Date,
- hour = date.getHours();
- hour = hour > 12 ? hour - 12 : hour;
- drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);
- drawHand(date.getMinutes(), false, 0.5);
- drawHand(date.getSeconds(), false, 0.2);
- }
- //每隔一秒抓取一次canvas快照,并更新img的src属性
- function updateClockImage() {
- dataUrl = canvas.toDataURL();
- snapshotImageElement.src = dataUrl;
- }
- //每秒执行一次绘制,canvas已隐藏,每秒更新一次img的src属性
- function drawClock() {
- context.clearRect(0,0,canvas.width,canvas.height);
- context.save();
- context.fillStyle = 'rgba(255,255,255,0.8)';
- context.fillRect(0, 0, canvas.width, canvas.height);
- drawCircle();
- drawCenter();
- drawHands();
- context.restore();
- drawNumerals();
- updateClockImage();
- }
- context.font = FONT_HEIGHT + 'px Arial';
- loop = setInterval(drawClock, 1000);
- </script>
- </body>
- </html>
离屏演示地址:http://sandbox.runjs.cn/show/lgymk7zo
离屏非离屏并存效果:http://sandbox.runjs.cn/show/uzxeuq4o