-
- 落魂灬 2018-03-05
- rad是求弧度
- 0赞 · 0采集
-
- 落魂灬 2018-03-05
- 再填充文本数字之前设置字体
- 0赞 · 0采集
-
- 落魂灬 2018-03-05
- 定义一个数组，存储小时数 然后遍历这个数组
- 0赞 · 0采集
-
- 依依若蝶 2018-02-14
- 画时钟上的数字和点
-
截图0赞 · 0采集
-
- 依依若蝶 2018-02-14
- 时钟效果
-
截图0赞 · 0采集
-
- 慕姐823827 2017-12-19
- kk
-
截图0赞 · 0采集
-
- 宝慕林3045059 2017-10-11
- //12个时间点 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.cox(rad)*(r-30); var y=Math.sin(rad)*(r-30); ctx.fillText(number,x,y);//按路径填充文本 }) //60个刻度点 for(var i=0;i<60;i++){ var rad=2*Math.PI/60*i; var x=Math.cos(rad)*（r-18）; var y=Math.sin(rad)*（r-18）; 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();//填充路径（实心点） }
- 0赞 · 0采集
-
- 血色万花筒 2017-09-22
- 时钟内容
-
截图0赞 · 0采集
-
- 慕粉094835986 2017-09-16
- javascript:;
-
截图0赞 · 0采集
-
- 慕粉1471958763 2017-05-10
- 需要用到调用函数 数学公式
- 0赞 · 0采集
-
- 慕粉0853341167 2017-02-22
- 时钟
-
截图0赞 · 0采集
-
- Cherryboys 2017-02-15
- 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); ctx.beginPath(); cxt.lineWidth = 10; ctx.arc(0,0,r,2*Math.PI,false); ctx.stroke(); } drawBackground();
-
截图0赞 · 0采集
-
- 慕码人8285780 2017-02-01
- javascript:;
-
截图0赞 · 0采集
-
- 慕码人8285780 2017-02-01
- javascript:;
-
截图0赞 · 0采集
-
- 慕码人8285780 2017-02-01
- javascript:;
-
截图0赞 · 0采集
-
- 异常代码 2016-12-28
- 见图
-
截图0赞 · 0采集
-
- 异常代码 2016-12-28
- Translate
- 0赞 · 0采集
-
- 异常代码 2016-12-28
- 见图
-
截图0赞 · 0采集
-
- qweqwe13123123 2016-12-08
- 画刻度 弧度red = 2*π 除以60 * 索引 x = 弧度 Math.cos(red) * 半径 没有数字那么远 (r-18) 这里需要beginPath 重新绘制路径 ctx.arc 画圆 fill 填充内容 ctx.fillStyle 设置绘画颜色 渐变
-
截图0赞 · 0采集
-
- qweqwe13123123 2016-12-08
- 弧度 = 2π /12 (求出每个时钟的弧度) * 索引 x = 弧度 * 半径 Math.cos(rad) * (r - 30); y = 弧度 * 半径 Math.sin(rad) * (r - 30); fillText(输出的文本，X坐标，Y坐标，文本最大宽度（可选）) font 设置文本样式 （在填充前引用） textAlign 文本内容对齐 textBaseline 基线对齐
-
截图0赞 · 0采集
-
- 慕工程2957023 2016-11-29
- //绘制数字 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();//填充当前路径； }
- 1赞 · 0采集
-
- sulin 2016-11-26
- font（）；//字体 textAlign(); //左右对齐 textBaseline(); //上下对齐
-
截图0赞 · 0采集
-
- sulin 2016-11-26
- fillText(text,x,y,maxWidth);
-
截图0赞 · 0采集
-
- qq__1939 2016-10-08
- 更改圆点颜色
-
截图0赞 · 0采集
-
- qq__1939 2016-10-08
- 画外圈圆，数字，内圈圆点代码。
-
截图0赞 · 0采集
数据加载中...
开始学习
免费