Canvas

<canvas id="demo">对不起，您的浏览器不支持canvas</canvas>
<!--牢记，canvas不要再CSS里面设置宽高-->

//--------------------------------------


<script type="text/javascript">
    /*第一步，获取canvas标签*/
    var can = document.getElementById("demo");
    can.style.border = '1px solid red';//设置画布描边
    can.width = 600;//设置画布宽度
    can.height = 600;//设置画布长度
    
    /*第二步获取canvas的上下文（画布工具栏）*/
    var ctx = can.getContext('2d');

    /*第三步，绘制图形*/
    /*画图第一步，定位坐标点*/
    /*ctx.moveTo(x,y)*/
    ctx.moveTo(100,100)/*将画笔移动画布上面的100*100的位置，左边是X轴，右边是Y轴*/
    ctx.lineTo(200,100)/*将画笔从100*1000的位置移动到200*100的位置*/
    ctx.lineTo(254,178)
    ctx.lineTo(368,114)
    /*画图画完一个图形之后，记住闭合路径*/
    ctx.closePath();
    /*最后的最后，给咱们刚刚那条线设置描边*/
    ctx.stroke();
    
</script>


//-------------------------------------------
    ctx.strokeStyle = "rgba(255,24,36,0.8)";//设置描边颜色
    ctx.fillStyle = "blue";//设置填充颜色
    
    
    ctx.storke()//执行描边
    ctx.fill()//执行填充

<canvas id="myfirst"></canvas>
<script>
    var myFirst = document.getElementById("myfirst");
    myFirst.style.border = "1px solid #eee" ;
    myFirst.width = 600;
    myFirst.height = 600;
    myFirst.style.margin = "100px auto 100px 200px";

    var go = myFirst.getContext("2d");
    //-----------------
    var num=0;
    for(var i= 0;i<12;i++){
        go.moveTo(50*i,0);
        go.lineTo(50*i,800);
        go.moveTo(0,50*i);
        go.lineTo(800,50*i)
    }
    go.strokeStyle = "rgba(150,24,36,0.8)";
    go.lineWidth = 1;
    go.stroke();

</script>

<script type="text/javascript">
    /*第一步，获取canvas标签*/
    var can = document.getElementById("demo");
    can.style.border = '1px solid red';
    can.width = 600;
    can.height = 600;
    
    /*第二步获取canvas的上下文（画布工具栏）*/
    var ctx = can.getContext('2d');
    ctx.rect(200,200,50,80);
    ctx.stroke();

    ctx.fillRect(500,500,100,100);//填充画矩形
    ctx.strokeRect(80,80,160,160);//描边画矩形

</script>

//----------------------------

<canvas id="demo">对不起，您的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
    var can = document.getElementById("demo");
    can.style.border = '1px solid red';
    can.width = 600;
    can.height = 600;
    var ctx = can.getContext('2d');
        function cricle(x,y){
        var r =Math.floor(Math.random()*255);
        var g =Math.floor(Math.random()*255);
        var b =Math.floor(Math.random()*255) ;
        var a =Math.random();
        ctx.beginPath();
        ctx.moveTo(300,300);
        ctx.arc(300,300,100,Math.PI/180*x,Math.PI/180*y);
        ctx.fillStyle = "rgba("+r+","+g+","+b+","+a+")";
        ctx.fill();
    }

    var arr = [-30,90,245,275,330];
    for(var i = 0; i<arr.length;i++){
        cricle(arr[i],arr[i+1]);
    }