网站php文件上传,c2c模式的典型网站,做视频资源网站,建设部网站如何下载文件使用canvas绘制时钟 什么使canvas呢#xff1f;HTML5 canvas 元素用于图形的绘制#xff0c;通过脚本 (通常是JavaScript)来完成。canvas 标签只是图形容器#xff0c;所以我们必须使用脚本来绘制图形。通过它可以绘制路径,盒、圆、字符以及添加图像等等。 …使用canvas绘制时钟 什么使canvas呢HTML5 canvas 元素用于图形的绘制通过脚本 (通常是JavaScript)来完成。canvas 标签只是图形容器所以我们必须使用脚本来绘制图形。通过它可以绘制路径,盒、圆、字符以及添加图像等等。 常用的API 这篇博文我将通过html5中的canvas元素绘制一个走动的时钟。 html代码如下 canvas idclock width200 height200 styleborder:1px solid #ff0000;/canvas 其中id这个属性是必须要添加的因为后面在JavaScript脚本中我们会通过它来获得这个元素。 注意到width和height都是没有单位的默认为px。 且canvas元素是没有内容的当然也可以写一些内容对于不支持canvas标签的浏览器来说它会显示其中的内容而对于支持canvas标签的浏览器而言其中的内容会被自动忽略。故其效果和noscript标签是一样的。我们还可以通过style属性来为canvas画布添加一个边框这样就可以直接在页面中看到效果了。 注意canvas元素默认是inline。 JavaScript代码如下 window.οnlοadfunction(){var clockdocument.getElementById(clock).getContext(2d);//通过获取canvas元素获取2d上下文var widthclock.canvas.width;//得到画布的宽度var heightclock.canvas.height;//得到花布的高度var rwidth/2;//得到将要画的时钟的半径var propwidth/150;//在此保留比例以便于在更换画布大小时调节function outline(){clock.save();//保存当前状态clock.translate(r,r);//将原点移动到(r,r)处clock.beginPath();//每个函数内部都要有beginPath()方法clock.lineWidth3*prop;//通过lineWidth来设置划线的宽度注意这里没有单位clock.arc(0,0,r-clock.lineWidth/2,0,2*Math.PI,false);clock.stroke();//绘制路径var scaleNumbers[3,4,5,6,7,8,9,10,11,12,1,2];clock.font12*proppx Arial;//通过font来设置字体的大小。关键一定单位px且后面一定要有字体样式clock.textAligncenter;//设置位水平居中clock.textBaselinemiddle;//设置位垂直居中 scaleNumbers.forEach(function(number,i){//遍历数组var rad2*Math.PI/12*i;var xMath.cos(rad)*(r-15*prop);var yMath.sin(rad)*(r-15*prop);clock.fillText(number,x,y);//在x y处绘制number});for(var i0;i60;i){var rad2*Math.PI/60*i;var xMath.cos(rad)*(r-7*prop);var yMath.sin(rad)*(r-7*prop);clock.beginPath();if(i%50){clock.fillStylered;//填充的颜色clock.arc(x,y,1*prop,0,2*Math.PI,false);}else{clock.fillStyleblack;clock.arc(x,y,1*prop,0,2*Math.PI,false);}clock.fill();}}function hours(hour,minute){clock.save();//一定要先保存clock.beginPath();var rad2*Math.PI/12*hour;var minute_rad2*Math.PI/12/60*minute;clock.rotate(radminute_rad);clock.strokeStyleblue;clock.lineCapround;clock.lineWidth5*prop;clock.moveTo(0,2*prop);clock.lineTo(0,-r40*prop);clock.stroke();clock.restore();//恢复}function minutes(minute){clock.save();clock.beginPath();clock.strokeStyleorange;//设置路径的颜色clock.lineWidth4*prop;clock.lineCapround;//设置线的样式var rad2*Math.PI/60*minute;clock.rotate(rad);//旋转画布clock.moveTo(0,5*prop);//将“画笔”移动到这里没有绘画clock.lineTo(0,-r25*prop);clock.stroke();clock.restore();}function seconds(second){clock.save();clock.beginPath();clock.fillStylered;var rad2*Math.PI/60*second;clock.rotate(rad);clock.moveTo(-2*prop,5*prop);clock.lineTo(2*prop,5*prop);clock.lineTo(1*prop,-r18*prop);clock.lineTo(3*prop,-r18*prop);clock.lineTo(0,-r10*prop);clock.lineTo(-3*prop,-r18*prop);clock.lineTo(-1*prop,-r18*prop);clock.fill();clock.restore();}function middle_dot(){clock.beginPath();clock.fillStylewhite;clock.arc(0,0,5*prop,0,2*Math.PI,false);clock.fill();}function all(){clock.clearRect(0,0,width,height);outline();middle_dot();var nownew Date();//通过Date对象获取时间var hournow.getHours();//获取当前小时数var minutenow.getMinutes();var secondnow.getSeconds();hours(hour,minute);minutes(minute);seconds(second);clock.restore();}all();setInterval(all,1000);//使用定时器不断更新时间};这样一个canvas绘制的时钟就完成了。看看最后的效果图吧 转载于:https://www.cnblogs.com/zhuzhenwei918/p/6058768.html
