-
刚才记得呢？查看全部
-
笔记是我查看全部
-
见图查看全部
-
Canvas知识: Fill()填充画图，stroke()绘制路径查看全部
-
做一个canvas时钟例子查看全部
-
//画出时分秒交汇处的圆点 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();//返回之前保存过的路径状态和属性 }查看全部
-
//画分针 function drawMinute(minute){ ctx.save();//保存当前环境的状态 ctx.beginPath();//画出竖着的那个时针的线 var rad = 2 * Math.PI / 60 * minute ;//需要旋转的弧度 ctx.rotate(rad); ctx.lineWidth = 3 ;//定义分针线的宽度 ctx.lineCap = "round";//设置时针线端点为圆的 ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 ctx.lineTo( 0 , -r + 30); //画出这条线 ctx.stroke(); //最终画出这条时针线 ctx.restore();//返回之前保存过的路径状态和属性 }查看全部
-
//画时针 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();//填充这个实心圆点 }查看全部
-
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);//在画布上绘制“被填充”的文本 });查看全部
-
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 ; //获取半径（可能不是实际半径）查看全部
-
sin()查看全部
-
设定一个可变化的 量 rem = width / 200 感觉这里可以加一个Math.floor(解决不是整数不能整除)查看全部
-
每秒清除内容重新绘画 clearRect 清除宽度 高度查看全部
举报
0/150
提交
取消