改动要点： 1.使用CSS分别设置http://www.oschina.net/code/snippet_2564655_56853（大漠浪踪）的三个画布，其中，画钟表的画布clockCanvas定义为隐式。 2.每一秒钟，将隐式画布的内容，画到增添的显
1. 使用 CSS分别设置 http://www.oschina.net/code/snippet_2564655_56853 （大漠浪踪）的三个画布，其中，画钟表的画布clockCanvas 定义为隐式。
2. 每一秒钟，将隐式画布的内容，画到增添的显示画布 clock上。
3. “机器猫”作为表盘，放到最底层
4. 调用方法drawImage(...) 时,可以调整图画(即钟表)的位置和大小，以便配上“机器猫”这个表盘
改动效果见：
http://sandbox.runjs.cn/show/kcjgivxs
http://runjs.cn/detail/kcjgivxs
1. [图片] machineCat_Clock.png
2. [文件] index2.html ~ 11KB 下载(2)
<! http://www.oschina.net/code/snippet_2564655_56853>
<html>
<head>
<meta charset="UTF-8">
<title>iwjvi</title>
<script>
var x = 100;//矩形开始坐标
var y = 100;//矩形结束坐标
var mx = 0;//0右1左
var my = 0; //0下1上
function draw20() {
var ml = 1;//每次移动长度
var w = 20;//矩形宽度
var h = 20;//矩形高度
var cw = 400;//canvas宽度
var ch = 300; //canvas高度
var context=document.getElementById("canvs").getContext("2d");
context.clearRect(0, 0, 400, 300);
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
context.fillRect(x, y, w, h);
if (mx == 0) {
x = x + ml;
if (x >= cw-w) {
mx = 1;
}
}
else {
x = x - ml;
if (x <= 0) {
mx = 0;
}
}
if (my == 0) {
y = y + ml;
if (y >= ch-h) {
my = 1;
}
}
else {
y = y - ml;
if (y <= 0) {
my = 0;
}
}
}
function drawmachinecat(){
var face=document.getElementById("mycanvas").getContext("2d");
face.arc(252,252,250,0,2*Math.PI);
face.fillStyle="#07beea";
face.fill();
face.lineWidth=2;
face.strokeStyle="#333";
face.stroke();
face.beginPath();
face.moveTo(160,450);
face.bezierCurveTo(0,400,0,110,210,115);
face.lineTo(290,115);
face.bezierCurveTo(500,110,500,400,340,450);
face.bezierCurveTo(280,470,220,470,160,450);
face.fillStyle="#fff";
face.fill();
face.stroke();
face.beginPath();
face.moveTo(150,150);
face.lineTo(150,100);
face.bezierCurveTo(158,50,240,50,250,100)
face.lineTo(250,150);
face.bezierCurveTo(250,210,150,210,150,150);
face.moveTo(250,150);
face.lineTo(250,100);
face.bezierCurveTo(258,50,340,50,350,100)
face.lineTo(350,150);
face.bezierCurveTo(350,210,240,210,250,150)
face.fillStyle="#fff";
face.fill();
face.stroke()
face.beginPath();
face.arc(225,155,10,0,2*Math.PI);
face.arc(275,155,10,0,2*Math.PI);
face.fillStyle="#333";
face.fill();
face.beginPath();
face.arc(249,205,25,0,2*Math.PI);
face.fillStyle="#c93e00";
face.fill();
face.stroke()
face.beginPath();
face.arc(260,195,10,0,2*Math.PI);
var gra=face.createRadialGradient(260,190,3,260,190,15)
gra.addColorStop(0,"#fff");
gra.addColorStop(1,"#c93e00")
face.fillStyle=gra;
face.fill()
face.beginPath()
face.moveTo(250,230);
face.lineTo(250,393)
face.moveTo(100,320)
face.bezierCurveTo(180,420,320,420,400,320);
face.lineWidth=3;
face.stroke();
face.beginPath();
face.moveTo(80,200);
face.lineTo(180,220);
face.moveTo(80,245);
face.lineTo(180,245);
face.moveTo(80,290);
face.lineTo(180,270)
face.moveTo(320,220);
face.lineTo(420,200)
face.moveTo(320,245);
face.lineTo(420,245)
face.moveTo(320,270);
face.lineTo(420,290)
face.stroke()
}
function drawClock() {
var img=document.getElementById("clockCanvas");//隐式画布的引用 img
var clock=img.getContext("2d"); //取得隐式画布的画笔 clock
//每次清空画布
clock.clearRect(0,0,500,500);
//获取系统当前时间（时 、分 、秒）
var now = new Date(); //实例化一个当前时间的对象，通过该对象获取系统当前时间
var sec = now.getSeconds(); //秒
var mins = now.getMinutes(); //分
var hours = now.getHours(); //时
//绘制文字，显示系统当前时间：
clock.save();
clock.translate(0,250);
clock.fillStyle = "#0000";
clock.strokeStyle = "#eee";
clock.font = "bold 25px 微软雅黑";
clock.strokeText("系统当前时间为："+hours+"时"+mins+"分"+sec+"秒",70,240);
clock.fillText("系统当前时间为："+hours+"时"+mins+"分"+sec+"秒", 70,240);
clock.restore();
//计算：满60分加一小时
hours = hours + mins/60;
//计算：将24小时制转化为12小时制
hours = hours>12?hours-12:hours;
//坏表盘
clock.beginPath();
clock.lineWidth=5;
clock.strokeStyle="coral";
clock.arc(250,250,200,0,2*Math.PI);
clock.stroke();
clock.closePath();
//时间刻度
for(var i = 0; i < 12; i++)
{
clock.save();
clock.translate(250,250);
clock.lineWidth=5;
clock.strokeStyle="#6666";
clock.rotate(i*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0, -200);
clock.lineTo(0, -180);
clock.stroke();
clock.restore();
}
//分刻度
for(var j = 0; j<60; j++)
{
clock.save();
clock.translate(250,250);
clock.lineWidth=3;
clock.strokeStyle="#6666";
clock.rotate(j*6*Math.PI/180);
clock.beginPath()
clock.moveTo(0, -200);
clock.lineTo(0, -190);
clock.closePath();
clock.stroke();
clock.restore();
}
clock.save();
clock.translate(250,250);
clock.lineWidth = 7;
clock.lineCap='round';
clock.strokeStyle = "#000000";
clock.rotate(hours*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0,15);
clock.lineTo(0,-120);
clock.stroke();
clock.closePath();
clock.restore();
clock.save();
clock.translate(250,250);
clock.lineCap='round';
clock.lineWidth=7;
clock.strokeStyle="darkcyan";
clock.rotate(mins*6*Math.PI/180);
clock.beginPath();
clock.moveTo(0,25);
clock.lineTo(0,-160);
clock.stroke();
clock.closePath();
clock.restore();
clock.save();
clock.translate(250,250);
clock.lineWidth=3;
clock.lineCap='round';
clock.strokeStyle="crimson";
clock.rotate(sec*6*Math.PI/180);
clock.beginPath();
clock.moveTo(0,40);
clock.lineTo(0,-180);
clock.stroke();
clock.closePath();
clock.lineWidth =2;
clock.fillStyle = "#fff";
clock.strokeStyle = "crimson";
clock.beginPath();
clock.arc(0,0,6,0,360,false);
clock.fill();
clock.stroke();
clock.closePath();
clock.beginPath();
clock.arc(0,-140,6,0,360,false);
clock.fillStyle="#fff"
clock.strokeStyle = "crimson";
clock.fill();
clock.stroke();
clock.closePath();
clock.restore();
// 取得显式画布个画笔 g
var g =document.getElementById("clock").getContext("2d");
g.clearRect(0,0,500,500);//清空显示画布
/* 用显式画布的画笔 g 将隐式画布的内容画到显示画布 “clock” 上
* 隐式画布的引用，在方法开始时，已经定义为 img
* 注意：调用方法drawImage(...)时,可以调整图画(即钟表)的位置和大小
* 以便配上“机器猫”这个表盘
*/
g.drawImage(img,-58,-58,620,620);
}
function preparation(){
drawmachinecat();
setInterval(drawClock, 1000);
setInterval(draw20 ,20);
}
</script>
<style>
#canvs{
position:absolute;
left:510px;
top:0px;
}
#author{
position:absolute;
left:510px;
top:300px;
width:510px;
height:300px;
text-align:start;
font-family:"楷体";
font-size:60px;
font-weight:bold;
color:#F63;
}
#clockCanvas{
display:none;
}
#clock{
position:absolute;
left:0px;
top:0px;
z-index:2;
}
#mycanvas{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
</head>
<body onLoad="preparation()">
<canvas id="mycanvas" width="510" height="510"></canvas>
<canvas width="500" height="500" id="clockCanvas"></canvas>
<canvas width="520" height="600" id="clock"></canvas>
<canvas width="520" height="600" id="canvs"></canvas>
<div id="author">根据<br>
<a href="http://www.oschina.net/code/snippet_2564655_56853"
target="new">大漠浪踪</a></div>
</body>
</html>