这是一个把时钟改版为罗盘旋转的javascript例子，，我想问下怎样才能把那个指针换成一张图片呢， 10
<html><head><title>用HTML5canvas编写的时钟|HTML5、CSS3、jQueryDEMO实例</title><metacharset="utf...
<html>
<head>
<title>用HTML5 canvas 编写的时钟 | HTML5、CSS3、jQuery DEMO 实例</title>
<meta charset="utf-8">
</head>
<body style='margin:100px 10px;background-color:'>
<canvas id="myCanvas" width="400" height="300" style="border:#06F solid 2px;">您的浏览器还不支持啊</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d"); //返回一个用于在画布上绘图的环境。目前唯一合法值是：2d
var slen = 60; //秒针的长度
var count=0;//实现计数
//strokeRect() 方法用于在单选按钮上模拟一次鼠标点击：
cxt.strokeRect(0, 0, c.width, c.height); //该方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部）
//.beginPath() 丢弃任何当前定义的路径并且开始一条新的路径
cxt.beginPath(); //beginPath() 方法在一个画布中开始子路径的一个新的集合
cxt.strokeStyle = "#000";
cxt.fillStyle = "#0f0";//控制时钟颜色
cxt.arc(200, 150,5, 0, 2*Math.PI, true); //arc(x, y, radius, startAngle, endAngle, counterclockwise),,暂不懂2*Math.PI，改成其他的也能转
cxt.fill(); //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
cxt.closePath();
cxt.beginPath();
cxt.strokeStyle = "#00f";
cxt.arc(200, 150, 100, 0, 2*Math.PI, true);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.translate(200, 150); //translate() 方法为画布的变换矩阵添加水平的和垂直的偏移,钟表内刻度和指针的集体的位置偏移
cxt.rotate(-Math.PI/2); //rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的 ,,此处作用是可以调整好时刻的正确位置
cxt.save();//save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。
cxt.closePath();
function slow(){}; //声明slow函数，减缓转动速度
function slow2(){}; //声明slow函数，减缓转动速度
var ls = 0, lm = 0, lh = 0;
var MyInterval1;
var MyInterval2;
var MyInterval3;
function Refresh(){ //转动
cxt.restore();
cxt.save();
cxt.rotate(ls * Math.PI / 30); //始终显示一根秒针
cxt.clearRect(5, -1, slen+1, 2+2); //clearRect() 方法擦除了指定的矩形，并且用一个透明的颜色填充它。
cxt.restore(); cxt.save();
var s = ls = Math.random()*50;
cxt.restore();
cxt.save();
cxt.rotate(s*Math.PI / 30);
cxt.fillRect(5, 0, slen, 2);
cxt.restore(); cxt.save();
count=count+1;
if(count==20){
clearInterval(MyInterval1);
slow();
}if(count==40){
clearInterval(MyInterval2);
slow2();
}else if(count==50){
clearInterval(MyInterval3);
alert("屎垃圾，你中枪了");
}
}
function slow(){
MyInterval2 = setInterval("Refresh();", 300);
}
function slow2(){
MyInterval3 = setInterval("Refresh();", 1000);
}
MyInterval1 = setInterval("Refresh();", 50);//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。直到 clearInterval() 被调用或窗口被关闭
</script>
</body>
</html> 展开
<head>
<title>用HTML5 canvas 编写的时钟 | HTML5、CSS3、jQuery DEMO 实例</title>
<meta charset="utf-8">
</head>
<body style='margin:100px 10px;background-color:'>
<canvas id="myCanvas" width="400" height="300" style="border:#06F solid 2px;">您的浏览器还不支持啊</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d"); //返回一个用于在画布上绘图的环境。目前唯一合法值是：2d
var slen = 60; //秒针的长度
var count=0;//实现计数
//strokeRect() 方法用于在单选按钮上模拟一次鼠标点击：
cxt.strokeRect(0, 0, c.width, c.height); //该方法按照指定的位置和大小绘制一个矩形的边框（但并不填充矩形的内部）
//.beginPath() 丢弃任何当前定义的路径并且开始一条新的路径
cxt.beginPath(); //beginPath() 方法在一个画布中开始子路径的一个新的集合
cxt.strokeStyle = "#000";
cxt.fillStyle = "#0f0";//控制时钟颜色
cxt.arc(200, 150,5, 0, 2*Math.PI, true); //arc(x, y, radius, startAngle, endAngle, counterclockwise),,暂不懂2*Math.PI，改成其他的也能转
cxt.fill(); //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
cxt.closePath();
cxt.beginPath();
cxt.strokeStyle = "#00f";
cxt.arc(200, 150, 100, 0, 2*Math.PI, true);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.translate(200, 150); //translate() 方法为画布的变换矩阵添加水平的和垂直的偏移,钟表内刻度和指针的集体的位置偏移
cxt.rotate(-Math.PI/2); //rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的 ,,此处作用是可以调整好时刻的正确位置
cxt.save();//save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。
cxt.closePath();
function slow(){}; //声明slow函数，减缓转动速度
function slow2(){}; //声明slow函数，减缓转动速度
var ls = 0, lm = 0, lh = 0;
var MyInterval1;
var MyInterval2;
var MyInterval3;
function Refresh(){ //转动
cxt.restore();
cxt.save();
cxt.rotate(ls * Math.PI / 30); //始终显示一根秒针
cxt.clearRect(5, -1, slen+1, 2+2); //clearRect() 方法擦除了指定的矩形，并且用一个透明的颜色填充它。
cxt.restore(); cxt.save();
var s = ls = Math.random()*50;
cxt.restore();
cxt.save();
cxt.rotate(s*Math.PI / 30);
cxt.fillRect(5, 0, slen, 2);
cxt.restore(); cxt.save();
count=count+1;
if(count==20){
clearInterval(MyInterval1);
slow();
}if(count==40){
clearInterval(MyInterval2);
slow2();
}else if(count==50){
clearInterval(MyInterval3);
alert("屎垃圾，你中枪了");
}
}
function slow(){
MyInterval2 = setInterval("Refresh();", 300);
}
function slow2(){
MyInterval3 = setInterval("Refresh();", 1000);
}
MyInterval1 = setInterval("Refresh();", 50);//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。直到 clearInterval() 被调用或窗口被关闭
</script>
</body>
</html> 展开
1个回答
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
