html5——canva 绘图1简单图形 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');
        oGC.fillStyle='red';
        oGC.strokeStyle="blue";
        oGC.lineWidth=10;
        /*设置角度*/
        oGC.lineJoin='round';
        /*不带边框的正方形*/
        oGC.fillRect(50,50,100,100);
            /*带边框的正方形*/
        oGC.strokeRect(50.5,50.5,100,100);
        /*背景颜色*/
    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>

 

三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');
        /*开始画线*/
        oGC.beginPath();
        /*起始点*/
        oGC.moveTo(100,100);
        /*点*/
        oGC.lineTo(200,200);
        oGC.lineTo(300,200);
        /*闭合*/
        oGC.closePath();
        /*生成线*/
        /*oGC.stroke();*/

        /*充填*/
        oGC.fill();
    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>

canvas封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');
        /*保存路径*/
        oGC.save();
        oGC.fillStyle='red';
        oGC.beginPath();
        /*正方形集合函数*/
        oGC.rect(100,100,100,100);
        oGC.closePath();
        oGC.fill();
        /*恢复路径 oGC.fillStyle='red';不影响下面代码起到封装作用*/
        oGC.restore();


        oGC.beginPath();
        oGC.rect(220,100,100,100);
        oGC.closePath();
        oGC.fill();
       

    
    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>

 

鼠标画线代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');

        oC.onmousedown=function(ev){

            var ev=ev||window.event;
            oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
            
                oC.onmousemove=function(ev){
                   var ev=ev||window.event;
                   oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
                   oGC.stroke();
                }
                document.onmouseup=function(){
                    
                     oC.onmousemove=null;
                     oC.onmouseup=null;
                }
        }

    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>

 

简单的方块下滑代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{background: #131115;}
    #c1{background: #fbf7fe;}
    </style>
    <script>
    window.onload=function(){

        var oC=document.getElementById('c1');
        var oGC=oC.getContext('2d');
        var num=0;
        oGC.fillStyle='red';
        
        oGC.fillRect(30,0,100,100);
        setInterval(function(){

                 num++;
                 oGC.clearRect(30,0, oC.width,oC.height);
                 oGC.fillRect(30,num,100,100);
        },30)


    }

   </script>
</head>
<body>
    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->
    <span>不支持camvas浏览器</span>
    </canvas>
</body>
</html>

 

posted @ 2017-01-04 19:53  distant-遥远  阅读(945)  评论(0)    收藏  举报