-
function drawBackground(){ ctx.translate(r,r);//重新定义原点坐标为（r,r） ctx.beginPath();//起始一条路径 ctx.lineWidth = 10; ctx.arc(0,0,r-5,0,2*Math.PI,false);//画圆，前两个0为圆点xy坐标，r为半径，中间的0为起始角 //2*Math.PI为结束角，flase为顺时针（此时圆还没有画出来） ctx.stroke();//绘制已定义路径 var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];//定义一个数组，存储12个小时数 ctx.font = "18px Arial"; ctx.textAlign = "center";//左右对齐 ctx.textBaseline = "middle";//上下对齐 //遍历数组，获取每一个小时数的坐标，然后填上数字 hourNumbers.forEach(function(number,i){//number是数字，i是索引 var rad = 2 * Math.PI / 12 * i //求弧度,此时为i对应的弧度 var x = Math.cos(rad) * (r - 30);//求x坐标 var y = Math.sin(rad) * (r - 30);//求y坐标 ctx.fillText(number,x,y);//在画布上绘制“被填充”的文本 });查看全部
-
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();查看全部
-
感觉老师像是四川的人喃。查看全部
-
//画时针 function drawHour(hour,minute){ ctx.save();//保存当前环境的状态 ctx.beginPath();//画出竖着的那个时针的线 var rad = 2 * Math.PI / 12 * hour ;//时针旋转的弧度 var mrad = 2 * Math.PI / 12 / 60 * minute;//分针旋转的弧度 ctx.rotate(rad + mrad); ctx.lineWidth = 6 ;//定义时针线的宽度 ctx.lineCap = "round";//设置时针线端点为圆的 ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 ctx.lineTo(0,-r/2); //画出这条线 ctx.stroke(); //最终画出这条时针线 ctx.restore();//返回之前保存过的路径状态和属性 }查看全部
-
for(var i = 1 ; i <= 60 ; i++){ //画60个点 var rad = 2 * Math.PI / 60 * i;//求每个点对应的弧度 var x = Math.cos(rad) * (r - 18);//求x坐标 var y = Math.sin(rad) * (r - 18);//求y坐标 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();//填充这个实心圆点 }查看全部
-
var dom = document.getElementById("clock"); //定义dom变量来获取canvas元素 var ctx = dom.getContext("2d"); //获取它的上下文 var width = ctx.canvas.width; //获取canvas的高 var height = ctx.canvas.height ; //获取canvas的宽 var r = width / 2 ; //获取半径（可能不是实际半径）查看全部
-
画时钟外框圆查看全部
-
<meta name="viewport" content=" width=device-width,initial-scale=1" /> 解释： content属性值 : width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。 user-scalable:是否可对页面进行缩放，no 禁止缩放查看全部
-
如果那副背景图不变的话，可另作为一个图层，不必要每秒渲染一次。 当然，带来的结果就是响应式的问题，如果加入一个判断语句判断，应该可行查看全部
-
弧度=弧长/半径，弧长就是周长2πr。整个圆有360°，于是1°的弧长就是2πr/360, 1°的弧度就等于（1°的弧长）/r.也就是(2π/360)/1.查看全部
-
1.不用的功能通过不同的函数来实现，通过给函数传入时间参数来实现表针的转动； 2.通过定义比例尺来实现缩放的比例不变；查看全部
-
Canvas 绘制时钟 弧度 = 弧长 / 半径 弧长 = 2πr 1°角的弧长 = 2πr / 360 1°角的弧度 = 2π / 360查看全部
-
Canvas知识: Fill()填充画图，stroke()绘制路径查看全部
-
//画出时分秒交汇处的圆点 function drawDot(){ ctx.beginPath(); ctx.fillStyle = "#fff"; ctx.arc(0,0,3,0,2*Math.PI,false);//画一个实心圆 ctx.fill(); }查看全部
-
//画秒针 function drawSecond(second){ ctx.save();//保存当前环境的状态 ctx.beginPath();//画出竖着的那个时针的线 ctx.fillStyle = "#c14543";//填充为红色 var rad = 2 * Math.PI / 60 * second ;//需要旋转的弧度 ctx.rotate(rad); ctx.moveTo(-2,20); //移动划线的原点到圆点下面一点 ctx.lineTo(2,20); ctx.lineTo(1,-r+18); ctx.lineTo(-1,-r+18); ctx.fill(); ctx.restore();//返回之前保存过的路径状态和属性 }查看全部
举报
0/150
提交
取消