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>

绘制曲线