javascript 【Canvas倒计时】

1.七巧板

 

 

 =======================================================画画基础知识==========================================================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas倒计时</title>
</head>
<body>
    <canvas id="canvas">
        你的浏览器不支持HTML5
    </canvas>
</body>
<script type="text/javascript">
    window.onload=function(){
    var canvas=document.getElementById("canvas");
    canvas.width=1200;
    canvas.height=728;
    var context=canvas.getContext('2d');
    //------画一条直线-----------
    context.beginPath()
    context.moveTo(100,100)  //初始位置
    context.lineTo(700,700)  //连接到末位置
    context.lineTo(100,700)
    context.lineTo(100,100)
    context.closePath()

    context.fillStyle="rgba(2,100,30,0.3)"//填充颜色
    context.fill()             //开始填充
 
    context.lineWidth=5      //线条宽度
    context.strokeStyle="#364" //线条颜色

    context.stroke()         //开始画
   //------------------------------
}

</script>
</html>

===============================================画圆=================================================================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas倒计时</title>
</head>
<body>
    <canvas id="canvas">
        你的浏览器不支持HTML5
    </canvas>
</body>
<script type="text/javascript">
    window.onload=function(){
    var canvas=document.getElementById("canvas");
    canvas.width=1200;
    canvas.height=728;
    var context=canvas.getContext('2d');
    //------画一个圆-----------
    context.lineWidth=5
    context.strokeStyle = "#678"
    for(var i=0;i<10;i++){
        context.beginPath()
        context.arc(50+i*100,180,60,0,2*Math.PI*(i+1)/10) //(x,y,r,start,end,true)最后一个是时序
                context.stroke()
 }
   //------------------------------
}

</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas倒计时</title>
</head>
<body>
    <canvas id="canvas">
        你的浏览器不支持HTML5
    </canvas>
</body>
<script type="text/javascript">
    window.onload=function(){
    var canvas=document.getElementById("canvas");
    canvas.width=1200;
    canvas.height=728;
    var context=canvas.getContext('2d');
    //------画一个圆-----------
    context.lineWidth=5
    context.strokeStyle = "#678"
    for(var i=0;i<10;i++){
        context.beginPath()
        context.arc(50+i*100,180,60,0,2*Math.PI*(i+1)/10) //(x,y,r,start,end,true)最后一个是时序
                context.stroke()
 }
   //------------------------------
}

</script>
</html>

 =======================================倒计时设计思路========================================

 

posted @ 2018-02-27 19:13  Justice-V  阅读(124)  评论(0)    收藏  举报