html5简单模拟老电影倒计时,小弟也来露一手。

转载 (原文地址) 炖猫术士 随笔 HTML5 2566阅读 2014-06-17 15:55:28 举报

html5,基础用法我就不多解释了。对于一些关键点,我做出了解释。不懂可以留言,供大家学习。基础相关,链接给大家。
[backcolor=rgb(249, 249, 249)]HTML DOM CanvasRenderingContext2D 对象 [/bgcolor]

这个对象时由var cxt = c.getContext('2d'); 即getContext()函数返回的值,它是个对象,有很多绘制图像方法,如下链接。
[url]http://www.w3school.com.cn/jsref/dom_obj_canvasrenderingcontext2d.asp[/url]

单独提出来。注意点。
/Tips:

  • 坐标原点由原先的左上角转移到画布中心。
  • 并且将画布转了-90度。这是由于,绘制0.4透明图层时,起始点函数默认位置有关。
  • [url]http://www.w3school.com.cn/tags/canvas_arc.asp[/url] 这是arc()函数解释。看了就明白了。
  • 画布旋转导致坐标也改变了,原先的x轴,变成水平位置了,y轴和x轴互换了位置。如果要精准绘制位置,必须明白这一点。
  • 还有的简单说明一下弧度和角度。根据定义,一周的弧度数为2πr/r=2π,360°角=2π弧度,因此,1弧度约为57.3°,即57°17'44.806'',
  • 1°为π/180弧度,近似值为0.01745弧度,周角为2π弧度,平角(即180°角)为π弧度,直角为π/2弧度。
    • */

效果图:

html5简单模拟老电影倒计时,小弟也来露一手。

运行代码:
代码片段 1

源码如下:
[code]<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>

</style>

</head>
<body>
<script>
var c = document.createElement('canvas');
var ch=c.width = 200;
var cw=c.height=200;
c.style.backgroundColor='darkkhaki';
document.body.appendChild(c);
var cxt = c.getContext('2d');
function drawbg(angle) {

    cxt.save();
    cxt.translate(100,100);
    cxt.rotate(-Math.PI/2);

// 绘制横竖线
cxt.moveTo(0,-100);
cxt.lineTo(0,ch/2);
cxt.stroke();

    cxt.moveTo(cw/2,0);
    cxt.lineTo(-cw/2,0);
    cxt.stroke();

// 绘制两圈圈
cxt.beginPath();
cxt.arc(0,0,88,0,Math.PI*2,false);
cxt.strokeStyle='#c4c7e4';
cxt.lineWidth=2;
cxt.stroke();
cxt.closePath();

    cxt.beginPath();
    cxt.arc(0,0,70,0,Math.PI*2,false);
    cxt.stroke();
    cxt.closePath();

    //绘制外层0.4透明度的图层。
    cxt.beginPath();
    cxt.fillStyle="#5e5e69";
    cxt.globalAlpha=0.4;
    cxt.arc(0,0,Math.sqrt(cw*cw+ch*ch),0,Math.PI/180*angle,false);
    cxt.lineTo(0,0);
    cxt.closePath();
    cxt.fill();
    cxt.restore();
    //tip:这里面使用到了 save() restore()。每次重新绘制时,导出上一次绘制的状态,然后再次基础上,绘制数字。之后再擦除画布。再次循环上一次操作。
}

var angle=0;
var per=10;
var timer =setInterval(function()
{
    angle+=7.2;//7.2经过计算的。
    if(angle>=360&&per!=0)//只要数字没到0,那么继续下一次绘制。时间--,角度--。
    {
        per--;
        angle=0;
    }
    if(angle>=360&&per==0)//终止计时器条件
    {
        clearInterval(timer);
    }
    cxt.clearRect(0,0,cw,ch);
    drawbg(angle);
    if(per==10)
        cxt.font='100pt Calibri';
    else
        cxt.font='130pt Calibri';
    cxt.textAlign='center';
    cxt.textBaseline='middle';
    cxt.fillText(per.toString(),ch/2,cw/2);//数字的表现和秒(时间)。一个意思。
},20);//20自定义。
//角度和setInterval的执行时间,是经过计算的。为了达到数字和0.4透明度图层的同步。
/*计算方法也很简单,如果要一使数字和图层一致,需要360°/1000ms,既每秒中0.4透明度图层绘制360度。然后考虑每次绘制时间,即setInterval的参数
时间。这个可以根据自己的视觉感受调整,我设置为20。那么每次绘制0.4透明度的角度就可以计算出来了。360/(1000/20)=7.2°。
 */

</script>
</body>
</html>[/code]

评论 ( 3 )
最新评论
lawrence 2018-08-07 09:43:48 3F

是转载的?

qmy777 2014-07-09 16:55:25 2F

有svg的么?

炖猫术士 2014-06-17 16:23:07 1F

补:参考 scavenger的博客 采用的 canvas方式来实现。之前也有css3和svg的。他们都是好样的。