作者: Andy. 时间: 2015-10-18 21:29:01
好久没更新播客了。
最近忙着学校里头的事儿,各种作业。只怪当年数学没学好,很多课程都不怎么应付的过来。还要好好学Linux。还有很久以前就想好好学的HTML5,结果因为拖延症一直拖着没学。乘着这次Web交互设计、数据可视化一定好好学一下~
然后博客源码也没有更新,头都大了。现在先将就的话,估计以后可能就会将就下去了喔…
刚刚看了canvas简单拿的画图后,写了一个很简单的时钟。就贴上来吧。
Draw、drawDial、drawHourHand、drawMinuteHand、drawSecondHand几个方法。Draw负责每秒提供参数,调用其它方法绘图,其他四个方法分别负责画表盘、时针、分针、秒针。
哈哈~够丑吧~~
html中的canvas标签(原谅中间的英文):
<canvas id="clock" width="500" height="500">Your brower does not ......</canvas>
draw方法:
function draw(){ var date=new Date(); var hour=date.getHours()%12; var minute=date.getMinutes(); var second=date.getSeconds(); context.clearRect(0,0,500,500); drawDial(); drawHourHand((hour+minute/60)/12*Math.PI*2); drawMinuteHand((minute+second/60)/60*Math.PI*2); drawSecondHand(second/60*Math.PI*2); }
drawDial方法
function drawDial(){ context.beginPath(); context.lineWidth=5; context.strokeStyle="blue"; context.arc(250,250,200,0,Math.PI*2,true); context.stroke(); context.closePath(); context.strokeStyle="black"; context.lineWidth=4; for(var i=1;i<13;i++){ context.save(); context.beginPath(); context.translate(250,250); context.rotate(i/12*Math.PI*2); context.moveTo(0,-180); context.lineTo(0,-200); context.stroke(); context.closePath(); context.restore(); } context.lineWidth=2; for(var i=1;i<61;i++){ context.save(); context.beginPath(); context.translate(250,250); context.rotate(i/60*Math.PI*2); context.moveTo(0,-180); context.lineTo(0,-190); context.stroke(); context.closePath(); context.restore(); } }
三个指针的方法:
function drawHourHand(angle){ //时针 context.lineWidth=4; context.save(); context.translate(250,250); context.rotate(angle); context.beginPath(); context.moveTo(0,3); context.lineTo(0,-130); context.stroke(); context.closePath(); context.restore(); } function drawMinuteHand(angle){ //分针 context.lineWidth=3; context.save(); context.translate(250,250); context.rotate(angle); context.beginPath(); context.moveTo(0,4); context.lineTo(0,-150); context.stroke(); context.closePath(); context.restore(); } function drawSecondHand(angle){ //秒针 context.lineWidth=2; context.save(); context.translate(250,250); context.rotate(angle); context.beginPath(); context.moveTo(0,5); context.lineTo(0,-160); context.stroke(); context.closePath(); context.restore(); }
因为很简单,就不放下载了~~就这样子吧。嘿嘿。
发现编辑器无法使用shift+tab缩进....这是一个问题....