canvas--知识点

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
//    ctx.fillRect(10, 10, 100, 50);  //绘制矩形,填充的默认颜色为黑色
//    ctx.strokeRect(10, 70, 100, 50);  //绘制矩形边框
//    ctx.clearRect(15,15,20,20);
//
//    ctx.beginPath();
//    ctx.moveTo(220,220);
//    ctx.lineTo(250,250);
//    ctx.lineTo(250,300);
//    ctx.fill();
//    ctx.closePath();
   //ctx.stroke();

//    ctx.beginPath();
//    ctx.arc(100,100,50,0,Math.PI/2,false);
//    ctx.fill();
    //ctx.moveTo(50, 50);
    //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
//    ctx.arcTo(200, 50, 200, 200, 50);
//    ctx.stroke();



//    ctx.beginPath();
//    ctx.moveTo(50, 50);
//    //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
//    ctx.arcTo(200, 50, 200, 200, 100);
//    ctx.lineTo(200, 200)
//    ctx.stroke();
//
//    ctx.beginPath();
//    ctx.rect(50, 50, 10, 10);
//    ctx.rect(200, 50, 10, 10)
//    ctx.rect(200, 200, 10, 10)
//    ctx.fill()

       /*ctx.beginPath();
       ctx.moveTo(100,100);

       ctx.quadraticCurveTo(150,50,150,150);
       ctx.fillStyle='#456451';
       ctx.strokeStyle='#456451';
       ctx.globalAlpha=0.5;
       ctx.fill();
       ctx.stroke();*/

       /*ctx.beginPath();
       ctx.moveTo(50,50);
       ctx.lineTo(150,150);
       ctx.lineWidth = 20;
       //ctx.fillStyle = "red";
       ctx.strokeStyle = "red";
       ctx.lineCap = "round";
       ctx.stroke();*/

       //ctx.beginPath();


       /*ctx.translate(100,100);
       ctx.save();
       ctx.strokeRect(50,50,100,100);
       ctx.restore();
       ctx.translate(200,200);
       ctx.fillRect(50,50,100,100);*/

       /*ctx.strokeRect(50,50,100,100);
       ctx.rotate(Math.PI/180*45);
       ctx.strokeRect(100,100,100,100);*/

        /*ctx.beginPath();
        ctx.arc(20,20, 100, 0, Math.PI * 2);
        ctx.clip();
        ctx.fillStyle = "pink";
        ctx.fillRect(20, 20, 100,100);*/
        var time = new Date();

        ctx.beginPath();
        ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
        ctx.arc(300,200,10,0,2*Math.PI);
        ctx.fillStyle = "#808080";
        ctx.fill();
        ctx.stroke();

        //ctx.strokeRect(300,50,100,100);