标签:函数 clear 长度 new height tor clock meta eth
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="500" height="500">您的浏览器不支持,请更新</canvas> <script> //绘制图片:drawImage(image,dx,dy[,dWidth,dHeight]) 复制图片:drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh); //意思为 把一张图片image放到canvas中,坐标是dx,dy控制图片位置以canvas左上角为坐标原点,dw,dh控制图片在canvas中显示的大小, //sx和sy代表你要从哪开始裁剪图片,sw和sh代表你要裁剪的那部分的大小 //sx,sy,sWidth,sHeight在图像中指定源矩形,dx,dy,dWidth,dHeight在画布上指定目标矩形 var c=document.getElementById("canvas");//获取canvas元素 var ctx=c.getContext("2d");//获取渲染上下文 function drawClock(){//创建函数 ctx.clearRect(0,0,c.width,c.height);//clearRect在给定矩形内清空一个矩形,0,0清空起始点,后两者为清空图形长宽 var now = new Date();//创建变量时分秒 var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); hour += min/60;//60分小时加一 hour-hour>12?hour-12:hour;//三元运算符,大于12减去12,小于则不变 //表盘 ctx.lineWidth=10;//lineWidth 属性设置或返回当前线条的宽度,以像素计 ctx.strokeStyle="deepskyblue";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式 ctx.beginPath();//起始一条路径,或重置当前路径 ctx.arc(250,250,200,0,360,false);//创建弧/曲线(用于创建圆形或部分圆) //arc(x,y,r,sAngle,eAngle,counterclockwise) //圆中心xy坐标r为半径,sAngle,eAngle起始角结束角,counterclockwise可选规定应该逆时针(false)还是顺时针(true)绘图。 ctx.closePath();//创建从当前点回到起始点的路径 ctx.stroke();//绘制已定义的路径。 //刻度 //1.时刻度 for(var i=0;i<12;i++){ ctx.save();//保存当前环境的状态。 //设置时针粗细 ctx.lineWidth-7; ctx.strokeStyle="#000";//设置颜色 //设置0,0点 ctx.translate(250,250);//重新映射画布上的(0,0)位置,即从250,250点为起始点开始绘制,而不是画布左上角的00点 //旋转角度 ctx.rotate(i*30*Math.PI/180);//旋转当前绘图,旋转i*30度,共绘制12个时针的刻度 ctx.beginPath();//开始一条路径,从位置0,-170。创建到达位置0,-190的一条线 ctx.moveTo(0,-170);//之后就会随着角度变化而绘制12个时针刻度 ctx.lineTo(0,-190);//时针刻度宽7,长20 ctx.closePath(); ctx.stroke(); ctx.restore();//返回之前保存过的路径状态和属性 } //分刻度 for(var i=0;i<60;i++){//注释同时针 ctx.save(); //分刻度粗细 ctx.lineWidth-5; ctx.strokeStyle="orangered"; //重置 ctx.translate(250,250); //旋转角度 ctx.rotate(i*6*Math.PI/180);//旋转6度的倍数 //画分刻度 ctx.beginPath(); ctx.moveTo(0,-180);//分针刻度宽5,长10 ctx.lineTo(0,-190); ctx.closePath(); ctx.stroke(); ctx.restore(); } //时针指针 ctx.save(); ctx.lineWidth-7; ctx.strokeStyle="#000"; //设置异次元空间0,0点 ctx.translate(250,250); //设置角度 ctx.rotate(hour*30*Math.PI/180);//旋转角度小时*30 ctx.beginPath(); ctx.moveTo(0,-140);//宽度7长度150 ctx.lineTo(0,10); ctx.closePath(); ctx.stroke(); ctx.restore(); //分针 ctx.save(); ctx.lineWidth-5; ctx.strokeStyle="orangered"; //重置 ctx.translate(250,250); ctx.rotate(min*6*Math.PI/180);//旋转角度分*6度 ctx.beginPath(); ctx.moveTo(0,-160); ctx.lineTo(0,15); ctx.closePath(); ctx.stroke(); ctx.restore(); //秒针 ctx.save(); ctx.strokeStyle="orchid"; ctx.lineWidth-3; //重置 ctx.translate(250,250); ctx.rotate(sec*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0,-170); ctx.lineTo(0,20); ctx.closePath(); ctx.stroke(); //设置时针,分针,秒针交叉点 ctx.beginPath(); ctx.arc(0,0,5,0,360,false);//半径5的一个圆 ctx.closePath(); //填充样式 //设置笔触样式(秒针已设) ctx.stroke(); ctx.fillStyle="wheat"; ctx.fill(); //设置秒针前段小点 ctx.beginPath(); ctx.arc(0,-150,5,0,360,false);//半径5的一个圆 ctx.closePath(); ctx.stroke(); ctx.fillStyle="wheat"; ctx.fill(); ctx.restore(); } drawClock();//调用函数 setInterval(drawClock,1000);//一秒走一次 </script> </body> </html>
标签:函数 clear 长度 new height tor clock meta eth
原文地址:https://www.cnblogs.com/forever-xuehf/p/9053101.html