-
wa_牛
- 有个关于clearRect()的问题
是将整个画布清空再重新画出的,0,0是从这个矩形的x,y轴坐标都为零的点，也就是左上角开始清空整个画布,因为之前设置的背景之类的已经保存过 所以每次清空重画的就是秒针分针时针
clearRect(x,y,width,height)这四个是必选的参数
- 2018-04-09 3回答·1326浏览
-
隐愿
- 关于最后的draw()
如果删除了，那么第一秒出现的是空白，过了一秒（1000毫秒）之后才会出现时钟。所以为了防止出现断层，一开始先把时钟画上去。我是这么理解的。
- 2018-01-25 2回答·1332浏览
-
慕运维1529754
- 时分秒钟闪现
是不是在setInterval(draw,1000);之前没有写上draw();的缘故啊？
- 2017-12-05 2回答·1201浏览
-
心上青
- 为什么clearRect没有作业
- 2017-11-23 2回答·1173浏览
-
慕先生5424944
- 怎么用canvas写钟表刻度的时钟和分钟
- 2017-08-09 2回答·2322浏览
-
________________KR
- 提问！大神来接
注意看看 html 是不是有 h5 的头 <!DOCTYPE html>
- 2017-07-11 1回答·945浏览
-
慕粉1904259890
- cxt.clearRect(0,0,width,height);为什么不作用呢？
在获取canvas的高度时， var height=cxt.canvas.height , height被你写成了 heigth，所以获取不到高度。有问题请回复，求采纳
- 2017-06-13 1回答·3044浏览
-
小铃翎_Ring
- 第一步就错了，只有方框，但是检查了好多次跟老师的一样啊
drawHour(hour,minute); drawMinute(minute); drawSecond(second);
这三个方法的代码可以贴下吗？
- 2017-06-08 3回答·1293浏览
-
慕粉4162184
- 大家都来看看 有问题一起解决
是不是要先保存一下场景然后在进行渐变操作然后再还原场景在进行绘制其他图形。
还没有打代码，刚看完视频，不过你的这个很有创意呀
- 2017-03-26 1回答·759浏览
-
单方良
- clearReact
context.clearRect(x,y,width,height);
有没有传参数？
- 2017-03-21 2回答·614浏览
-
qq_笑的狠牵强_0
- 可以转动，但是是按照时针来转的，不是秒针？
下面的代码是按照秒针rotate:
function drawHour(hour,minute,second){ ctx.save(); ctx.beginPath();
var rad=2*Math.PI/12*hour;
var srad=2*Math.PI/60/60*second;
var mrad=2*Math.PI/12/60*minute+srad;
ctx.rotate(rad+mrad);
ctx.lineWidth=6; ctx.lineCap='round'; ctx.moveTo(0,10*rem); ctx.lineTo(0,-r/2); ctx.stroke(); ctx.restore(); }
function drawMinute(minute,second){ ctx.save();
var rad=2*Math.PI/60*minute;
var srad=2*Math.PI/60/60*second;
ctx.rotate(rad+srad);
ctx.beginPath(); ctx.lineWidth=3; ctx.lineCap='round'; ctx.moveTo(0,20*rem); ctx.lineTo(0,-r/4*3); ctx.stroke(); ctx.restore(); }
function drawSecond(second){ ctx.save(); ctx.fillStyle="#c12345" var rad=2*Math.PI/60*second; ctx.rotate(rad); ctx.beginPath(); ctx.moveTo(-2,20*rem); ctx.lineTo(2,20*rem); ctx.lineTo(1,-r+18*rem); ctx.lineTo(-1,-r+18*rem); ctx.fill(); ctx.restore(); } function drawDot(){ ctx.beginPath(); ctx.fillStyle="#fff"; ctx.arc(0,0,3,0,2*Math.PI,false); ctx.fill(); } function draw(){ ctx.save(); ctx.clearRect(0,0,width,height); var now=new Date(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds(); drawBackground(); drawHour(hour,minute,second); drawMinute(minute,second); drawSecond(second); drawDot(); ctx.restore(); } draw(); setInterval(draw,1000);
- 2017-03-12 1回答·745浏览
-
任性不是罪
- 为何时钟的时间和系统时间不一致？
var minute = now.getMinutes();
- 2017-03-01 2回答·1243浏览
-
稻草人的眼泪
- 静态的可以实现，改成动态的代码只看见正方形。求解
function draw() {
ctx.clearRect(0,0,width,height);
var now=new Date();
var hour=now.getHours();
var minute-now.getMinutes();//你把=打成-了
var second=now.getSeconds();
drawBackground();
drawHour (hour,minute);
drawMinute (minute);
drawSecond (second);
drawDot();
ctx.restore();
}
- 2017-02-24 1回答·782浏览
-
慕粉3435799
- h5 clearRect()方法无法清除画布内容
最大的可能是你拿错参数了，是height参数，length参数在清除之前效果是一样的。
- 2017-02-14 1回答·1021浏览
-
慕粉1906006274
- 她会动，但是要刷新秒针才会动
- 已采纳 一只幸福的喵 的回答
你用我得代码把，可能哪里你敲错了一个字母，我也没检查出来
window.onload=function () {
var dom=document.getElementById('clock');
var ctx=dom.getContext('2d');
var height=dom.height;
var width=dom.width;
var r=width/2;
var rem=width/200;
function drawBac() {
ctx.save();
ctx.translate(r,r);//重定义原点
ctx.beginPath();
ctx.lineWidth=10*rem;
ctx.arc(0,0,r-ctx.lineWidth/2,2*Math.PI,false);
ctx.stroke();
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18*rem+'px Arial';
ctx.textAlign='center';
ctx.textBaseline='middle';
hourNumbers.forEach(function (number,i) {
var rad=2*Math.PI/12*i;
var x=Math.cos(rad)*(r-30*rem);
var y=Math.sin(rad)*(r-30*rem);
ctx.fillText( number,x,y);
});
for (var i = 0; i<60; i++) {
var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-18*rem);
var y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();
if (i%5===0) {//整点时为黑点
ctx.fillStyle='#000';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
} else {
ctx.fillStyle='#ccc';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();
}
}
//绘制时针
function drawHour(hour,min) {
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;//定义每小时旋转的弧度
var mrad=2*Math.PI/12/60*min;
ctx.rotate(rad+mrad);
ctx.lineWidth=6*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function drawMin(min) {
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*min;//定义每小时旋转的弧度
ctx.rotate(rad);
ctx.lineWidth=3*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+30*rem);
ctx.stroke();
ctx.restore();
}
function drawSec(sec) {
ctx.save();
ctx.beginPath();
ctx.fillStyle='#c14543';
var rad=2*Math.PI/60*sec;//定义每小时旋转的弧度
ctx.rotate(rad);
ctx.moveTo(-2*rem,20*rem);
ctx.lineTo(2*rem,20*rem);
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill();
ctx.restore();
}
function drawDot() {
ctx.beginPath();
ctx.fillStyle='#fff';
ctx.arc(0,0,3*rem,0,2*Math.PI,false);
ctx.fill();
}
function draw() {
ctx.clearRect(0,0,width,height);
var now=new Date();
var hour=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
drawBac();
drawHour(hour,min);
drawMin(min);
drawSec(sec);
drawDot();
ctx.restore();
}
draw();
setInterval(draw,1000);
}- 2017-01-17 1回答·999浏览
-
慕粉4042427
- 大神呀帮忙修改下为何不动
- 已采纳 udnernahs 的回答
var canvas = document.getElementById("clock")
canvas.width =200
canvas.height = 200
var ctx = canvas.getContext("2d")
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
function drawDot(){
setInterval(draw,1000);
}
function drawBackground(){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth=10;
ctx.arc(0,0,r-5,0,2*Math.PI,false);
ctx.stroke();
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
hourNumbers.forEach(function(number,i){
ctx.font='18px Arial'
ctx.textAlign='center';
ctx.textBaseline='middle';
var rad=2*Math.PI/12*i;
var x=Math.cos(rad)*(r-30);
var y=Math.sin(rad)*(r-30);
ctx.fillText(number,x,y);
});
for(var i=0;i<60;i++){
var rad=2*Math.PI/60*i;
var x=(r-20)*Math.cos(rad);
var y=(r-20)*Math.sin(rad);
ctx.beginPath();
if(i%5==0){
ctx.arc(x,y,2,0,2*Math.PI,false);
ctx.fillStyle='#000';
}
else{
ctx.arc(x,y,2,0,2*Math.PI,false);
ctx.fillStyle='#ccc';
}
ctx.fill();
}
}
function drawHour(hour,minu){
// alert("110");
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;
var mrad=2*Math.PI/12/60*minu;
ctx.lineWidth=5;
ctx.linecap='round';
ctx.rotate(rad+mrad);
ctx.moveTo(0,10);
ctx.lineTo(0,-r/3);
ctx.stroke();
ctx.restore();
}
function drawMinute(minu){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*minu;
ctx.lineWidth=3;
ctx.linecap='round';
ctx.rotate(rad);
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*second;
ctx.lineWidth=1;
ctx.linecap='round';
ctx.strokeStyle='#0000ff';
ctx.rotate(rad);
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2-10);
ctx.stroke();
ctx.restore();
}
function drawDot(){
ctx.beginPath();
ctx.fillStyle='#fff';
ctx.arc(0,0,3,0,2*Math.PI,false);
ctx.fill();
}
function draw(){
ctx.clearRect(0,0,width,height);
var now =new Date();
var hour=now.getHours();
var minu=now.getMinutes();
var second=now.getSeconds();
drawBackground();
drawHour(hour,minu);
drawMinute(minu);
drawSecond(second);
drawDot();
// ctx没有restore
ctx.restore();
}
// 没有设置定时器
setInterval(draw, 1000);
- 2016-12-20 3回答·1058浏览
-
织梦_
- 为什么ctx.clearRect(0,0,width,height);要放在第一行？
先清除，重画，每一次都是先清除，再重画，
- 2016-11-24 1回答·2534浏览
-
慕粉3906643
- 为什么加了清除，还是重复的再画呢？
- 2016-10-27 3回答·663浏览
-
慕神2706593
- 用了clearRect没反应呐
- 已采纳 shsgear 的回答
你把drawBackground和drawDot函数放在draw()函数外面没有意义，因为每次执行draw函数都会直接清除画布，还是会被清除掉.
尝试下这样：
setInterval(function(){ ctx.clearRect(0,0,w,h); draw(); },1000);
个人感觉画布在restore和save上要多加小心，很容易出错了，我是调试时没有在draw()函数忘了写上ctx.restore()出现跟你一样的情况，加上之后发现虽然不错位了，但是没有清除的效果，所以就改成了上面的在定时器里清除画布全部代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ text-align: center; margin-top: 250px; } #click{ border: 1px solid #CCC; } </style> </head> <body> <div> <canvas id="click" width="200px" height="200px"></canvas> </div> <script> var canvas=document.getElementById('click'); var ctx=canvas.getContext('2d'); var w=ctx.canvas.width; var h=ctx.canvas.height; var r=w/2; function drawCircle(){ ctx.save(); ctx.translate(r,r); ctx.beginPath(); ctx.lineWidth=10; ctx.arc(0,0,r-5,0,2*Math.PI,false); ctx.stroke(); var hoursNum=[3,4,5,6,7,8,9,10,11,12,1,2]; hoursNum.forEach(function(number,i){ ctx.font='18px 微软雅黑'; ctx.textAlign='center'; ctx.textBaseline='middle'; var rad=2*Math.PI/12*i; var y=(r-30)*Math.sin(rad); var x=(r-30)*Math.cos(rad); ctx.fillText(number,x,y); }) } function drawDots(){ for(j=0;j<60;j++){ ctx.beginPath(); var rad=2*Math.PI/60*j; var y=(r-15)*Math.sin(rad); var x=(r-15)*Math.cos(rad); ctx.beginPath(); if(j%5===0){ ctx.fillStyle='#000' ctx.arc(x,y,3,0,2*Math.PI,false); }else{ ctx.fillStyle='#CCC'; ctx.arc(x,y,2,0,2*Math.PI,false); } ctx.fill(); } ctx.beginPath(); ctx.fillStyle='white'; ctx.arc(0,0,2.5,0,2*Math.PI,false); ctx.fill(); } function drawHour(h,min){ ctx.save(); ctx.beginPath(); ctx.lineWidth=6; ctx.lineCap='round'; var rad=2*Math.PI/12*h; var minRad=2*Math.PI/720*min; ctx.rotate(rad+minRad); ctx.moveTo(0,10); ctx.lineTo(0,-(r-50)); ctx.stroke(); ctx.restore(); } function drawMinute(min,sec){ ctx.save(); ctx.beginPath(); ctx.lineWidth=4.5; ctx.lineCap='round'; var rad=2*Math.PI/60*min; var secRad=2*Math.PI/3600*sec; ctx.rotate(rad+secRad); ctx.moveTo(0,10); ctx.lineTo(0,-(r-40)); ctx.stroke(); ctx.restore(); } function drawSecond(sec){ ctx.save(); ctx.beginPath(); ctx.fillStyle='crimson'; ctx.rotate(2*Math.PI/60*sec); ctx.moveTo(-2,20); ctx.lineTo(2,20); ctx.lineTo(1,-r+18); ctx.lineTo(-1,-r+18); ctx.fill(); ctx.restore(); } function draw(){ ctx.clearRect(0,0,w,h) drawCircle(); var now=new Date(); var h=now.getHours(); var min=now.getMinutes(); var sec=now.getSeconds(); drawHour(h,min); drawMinute(min,sec); drawSecond(sec); drawDots(); } draw(); setInterval(draw,1000); </script> </body> </html>- 2016-10-22 2回答·3121浏览
-
不C
- 一秒之后就变了。。。
- 已采纳 muwenyuan 的回答
在drawBackground()开始那保存一下当前的环境状态
- 2016-10-13 3回答·1460浏览
