html 绘图 



<html>
<head>
<title>canvas绘制图形</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        #mycanvas{
            border: 1px solid #9c9898;
            
        }
        
    </style>
    <script type=text/javascript >
        window.onload=function(){
            var  ca=document.getElementById("mycanvas");
            var context=ca.getContext("2d");
            context.fillStyle="#ff0000";
            context.fillRect(200,50,100,100);
    


        }
    </script>
<body>
    <canvas id ="mycanvas" width="500" height="200">
        浏览器不支持
    </canvas>
</body>
</head>
</html>

 

绘制直线：

<html>
<head>
<title>canvas绘制图形</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        #mycanvas{
            border: 1px solid #9c9898;
            
        }
        
    </style>
    <script type=text/javascript >
        window.onload=function(){
            var  ca=document.getElementById("mycanvas");
            var context=ca.getContext("2d");
            context.beginPath();
            context.moveTo(20, 220);
            context.lineTo(500,220);
            context.lineWidth=20;
            context.strokeStyle="#ff0000";
            context.stroke();
    


        }
    </script>
<body>
    <canvas id ="mycanvas" width="500" height="300">
        浏览器不支持
    </canvas>
</body>
</head>
</html>

 

 

绘制曲线

 

posted @ 2016-07-25 14:29  超级学渣渣  阅读(258)  评论(0)  编辑  收藏  举报