-
//时针 function drawHour(hour,minute){ ctx.save();//保存当前的画布状态 var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute; ctx.rotate(rad);//旋转画布 ctx.rotate(rad); ctx.lineWidth="6"; ctx.lineCap="round";//向线条的每个末端添加圆形线帽 ctx.beginPath(); ctx.moveTo(0,10);//起点 ctx.lineTo(0,-r/2+10);//连接的下一个点 ctx.stroke();//绘制路径 ctx.restore();//恢复到上一次保存的画布状态 } //分针 function drawMinute(minute){ ctx.save(); var rad=2*Math.PI/60*minute; ctx.rotate(rad); ctx.lineWidth="4"; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(0,10); ctx.lineTo(0,-r/2); ctx.stroke(); ctx.restore(); }查看全部
-
//绘制数字 var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; ctx.font="18px 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); 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=Math.cos(rad)*(r-15); var y=Math.sin(rad)*(r-15); ctx.beginPath(); if(i%5===0){ ctx.fillStyle="#000";//设置或返回用于填充绘画的颜色、渐变或模式 ctx.arc(x,y,2,0,2*Math.PI,false); }else{ ctx.fillStyle="#ccc"; ctx.arc(x,y,2,0,2*Math.PI,false); } ctx.fill();//填充当前路径； }查看全部
-
canvas讲解http://javascript.ruanyifeng.com/htmlapi/canvas.html var dom=document.getElementById("clock"); var ctx=dom.getContext("2d"); var width=ctx.canvas.width;//获取画布的宽 var height=ctx.canvas.height; var r=width/2; function drawbackground(){ ctx.translate(r,r);//把坐标的基准点移动到（r,r）的位置; ctx.beginPath();//开始一条路径 ctx.lineWidth=10;//线宽 ctx.arc(0,0,r-5,0,2*Math.PI,false);//画圆，参数（圆心坐标x，圆心坐标y，圆的半径，起始弧度，结束弧度，顺时针绘制为false） ctx.stroke();//开始绘制路径 } drawbackground();查看全部
-
弧度=弧长/半径 圆的弧度为 2PI 半圆的弧度为 PI 一个圆的弧长=2*PI*r 1度的弧长=2*PI*r/360 1度的弧度=2*PI/360查看全部
-
canvas画时钟查看全部
-
save(); //保存当前环境的状态 restore(); //返回之前保存过的路径状态和属性查看全部
-
font（）；//字体 textAlign(); //左右对齐 textBaseline(); //上下对齐查看全部
-
fillText(text,x,y,maxWidth);查看全部
-
context.arc(x,y,r,sAngle,eAngle,counterclockwise);查看全部
-
canvas1查看全部
-
弧度=弧长/半径 1个员的弧长=2πR查看全部
-
代码第一步之前查看全部
-
sin方法查看全部
-
Cannot read property 'getContext' of null, using canvas. 在自己跟着视频学习的过程中，遇到是、如上一个问题。后来百度到时因为canvas要在js之前加载，或者用一个jQuery包装起来，才能正确画出图形。但不明白为什么在这样加载，求大神支招。查看全部
-
秒针指向15秒的时候未计算考虑分针的位置变化查看全部
举报
0/150
提交
取消