原理:
1.canvas通过clip()指定对应的区域为可用区域,在区域外的部分不受影响,每次刷新可见区域
2.通过createPattern指定背景图片,通过fillStyle = pat应用填充结果
3.save, restore恢复原来的状态
4.指针通过角度变换得到对应的坐标,lineTo即可
5.toDataURL保存对应的canvas的png的base64值
效果:
代码:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock test</title>
<style type="text/css">
canvas{border:1px solid #111;}
</style>
</head>
<body>
<canvas width="400" height="300" id="canvasContainer">Your Browser does not support Canvas</canvas>
<img id="myimg" src="images/01.png" width="1" height="1" />
<select id="bg" onchange="changePic(this.value)">//背景图片选择
<option value="01">01.png</option>
<option value="02">02.png</option>
<option value="04">04.png</option>
<option value="08">08.png</option>
<option value="09">09.png</option>
<option value="11">11.png</option>
<option value="12">12.png</option>
<option value="14">14.png</option>
</select>
<button onclick="savePic()">SavePic</button>
<script type="text/javascript">
window.onload = init;
function init(){ //数据初始化
$canvas = document.getElementById('canvasContainer');
ctx = $canvas.getContext("2d");
drawSomething();
window.setInterval(drawCircle,200);
}
function savePic(){//图片保存方法
var img = new Image();
img.src = $canvas.toDataURL();//这句是重点
document.body.appendChild(img);
}
function changePic(pic){
pic = "images/"+pic+".png";
var img = document.getElementById("myimg");
img.onload = function(){
ctx.drawImage(img,0,0,128,128,150,0,200,200);//右侧背景图片显示,以区别时钟区域的刷新
}
img.src = pic;
}
function drawCircle(){ //时钟绘制
var x = 64, y=64;
var img = document.getElementById("myimg");
var pat = ctx.createPattern(img,"no-repeat");//时钟背景填充初始化
var sL = 50,mL=40,hL=30,dt=new Date();//角度计算
var sang = -Math.PI*(dt.getSeconds()*6)/180+Math.PI;
var mang = -Math.PI*(dt.getMinutes()*6)/180+Math.PI;
var hang = -Math.PI*(dt.getHours()*30)/180+Math.PI-dt.getMinutes()/360*Math.PI*0.5;
ctx.save();
ctx.strokeStle = "#fff"; ctx.arc(x,y,64,0,Math.PI*2); ctx.clip();//可见区域定制
ctx.clearRect(0,0,400,300);//全画布清空,只有可见区域被清空,
ctx.fillStyle = pat; ctx.fill();//时钟背景应用
ctx.beginPath();//时钟指针绘制
ctx.strokeStyle = "#e33";ctx.fillStyle="#e33";ctx.lineWidth = 1;
ctx.moveTo(x,y);
ctx.lineTo(x+sL*Math.sin(sang),y+sL*Math.cos(sang));
ctx.arc(x+sL*Math.sin(sang),y+sL*Math.cos(sang),2,0,Math.PI*2); ctx.fill();
ctx.closePath(); ctx.stroke(); ctx.beginPath();
ctx.strokeStyle = "#2f2"; ctx.lineWidth = 2;
ctx.moveTo(x,y);
ctx.lineTo(x+mL*Math.sin(mang),y+mL*Math.cos(mang));
ctx.closePath(); ctx.stroke(); ctx.beginPath();
ctx.strokeStyle = "#11e"; ctx.lineWidth = 3;
ctx.moveTo(x,y);
ctx.lineTo(x+hL*Math.sin(hang),y+hL*Math.cos(hang));
ctx.closePath(); ctx.stroke();
ctx.fillStyle = "#e33";
ctx.arc(x,y,5,0,Math.PI*2);
ctx.fill();
ctx.restore();
}
function drawSomething(){//显示年月日,与右侧时钟背景作用类似,以区别这里不被重绘
ctx.fillStyle = "#eee";
ctx.fillRect(0,0,640,480);
ctx.fillStyle = "#333";
ctx.fillRect(0,128,128,20);
ctx.fillStyle = "#fff";
ctx.font = "14px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "top";
var dt = new Date();
var dy = dt.getFullYear(),dm=dt.getMonth()+1,dd=dt.getDate();
var str = dy + "年" + dm+"月" + dd + "日";
ctx.fillText(str,64,128);
}
</script>
</body>
</html>
完整源代码如附件
如有转载,请保留以下内容
author: mooring
site: http://mooring.iteye.com/
date: 2012/07/15
- 大小: 34.6 KB
分享到:
相关推荐
html5 canvas云粒子数字时钟动画特效 html5 canvas云粒子数字时钟动画特效
之前我们有给大家介绍过很多基于...这次要分享的是15个超绚丽的HTML5 Canvas时钟动画特效,它们很多都有各自不同的外观,有几个时钟的造型还非常新颖奇特,因为是基于HTML5 Canvas的,所以你的浏览器需要支持HTML5。
HTML5 Canvas创意时钟特效是一款基于HTML5和Canvas绘制的圆形个性化时钟动画特效。
HTML5 Canvas圆形灯笼时钟动画特效是一款个性的类似红色灯笼一样的指针时钟动画特效。
前不久我们刚为大家分享过一款很不错的jQuery/CSS3带数字时钟的圆盘时钟...今天我们要继续为大家介绍另外一个基于HTML5 Canvas的圆形时钟动画。它的功能非常简单,就是一个简单的时钟,时针分针和秒针的颜色各不相同。
HTML5 Canvas粒子数字时钟动画.zip
HTML5 Canvas红色灯笼时钟动画,红色风格,网页时钟,根据电脑时间走时。
HTML5 Canvas粒子数字时钟特效是一款可自定义颜色背景的云粒子数字时钟动画特效。
HTML5个性圆弧时钟动画特效是一款html5基于canvas绘制酷炫发光的圆弧线条走动时钟动画特效。
这次我们要继续为大家分享一款基于HTML5 Canvas的圆盘时钟动画,和之前分享的这款HTML5 Canvas 圆形时钟动画类似,它也是基于HTML5的,但是这款时钟提供了3种不同的样式风格,而且时钟的大小可以自己控制。
一款很有特色的HTML5 Canvas水里数字时钟动画特效,水纹底下走动的数字时钟。
一款圆形的HTML5 Canvas创意个性化时钟动画特效,指针非常有特色,圆形时钟下方还有数字时钟显示。
HTML5 canvas实现科技感十足的带辐射线动画时钟特效源码.zip
HTML5 简单的动画 数字时钟 解压后 点击这个html文件 html5_canvas_animations3.html 用FireFox4 ,IE9,Chrome访问
HTML5 Canvas圆形灯笼时钟动画特效是一款个性的类似红色灯笼一样的指针时钟动画特效。
HTML5 Canvas创意时钟特效是一款基于HTML5和Canvas绘制的圆形个性化时钟动画特效。
html5 canvas实现彩色酷炫圆弧时钟动画特效源码.zip