canvas基础

第一步：将canvas转为2d模型 getContext

    var canvas=document.querySelector("#canvas")
    canvas.width=1500;//宽高直接设置属性值，不要写在样式上
    canvas.height=1000;
    var content=canvas.getContext("2d")

绘制矩形 fillRect

    content.fillStyle="red"
    content.fillRect(0,0,100,200)---x,y,w,h
    content.fill()

绘制圆 arc

      content.fillStyle="red"
      content.arc(200,200,100,0,Math.PI*2,true)//x,y,r,起始角度，终止角度，顺时针/逆时针
      content.fill()

绘制线

   content.strokeStyle="green"
    content.fillStyle="red"
    content.lineWidth=10
    content.moveTo(100,10)-开始位置
    content.lineTo(100,110)
    content.lineTo(200,110)
    content.stroke()
    content.fill()

圆形渐变

       content.beginPath()
       var rad=content.createRadialGradient(200,200,0,200,200,100)--起始坐标x,y,r,x1,y1,r1-终止坐标半径
       rad.addColorStop(0.1,"red")
       rad.addColorStop(0.2,"orange")
       rad.addColorStop(0.3,"yellow")
       rad.addColorStop(0.4,"green")
       rad.addColorStop(0.5,"aquamarine")
       rad.addColorStop(0.6,"blue")
       rad.addColorStop(0.7,"plum")
       rad.addColorStop(0.8,"pink")
       rad.addColorStop(0.9,"paleturquoise")
       rad.addColorStop(1,"darkorange")
       content.fillStyle=rad
       content.arc(200,200,100,0,Math.PI*2,true)
       content.fill()
       content.closePath()

线形渐变

           content.beginPath()
           var rad=content.createLinearGradient(200,200,200,100)
           rad.addColorStop(0.1,"red")
           rad.addColorStop(0.2,"orange")
           rad.addColorStop(0.3,"yellow")
           rad.addColorStop(0.4,"green")
           rad.addColorStop(0.5,"aquamarine")
           rad.addColorStop(0.6,"blue")
           rad.addColorStop(0.7,"plum")
           rad.addColorStop(0.8,"pink")
           rad.addColorStop(0.9,"paleturquoise")
           rad.addColorStop(1,"darkorange")
           content.fillStyle=rad
           content.arc(200,200,100,0,Math.PI*2,true)
           content.fill()
           content.closePath()

文字渐变

               var rad=content.createLinearGradient(0,0,0,100)
               rad.addColorStop(0.1,"red")
               rad.addColorStop(0.2,"orange")
               rad.addColorStop(0.3,"yellow")
               rad.addColorStop(0.4,"green")
               rad.addColorStop(0.5,"aquamarine")
               rad.addColorStop(0.6,"blue")
               rad.addColorStop(0.7,"plum")
               rad.addColorStop(0.8,"pink")
               rad.addColorStop(0.9,"paleturquoise")
               rad.addColorStop(1,"darkorange")
               content.fillStyle=rad
               content.font="100px STheiti, SimHei";
               content.fillText("我canvas",0,100)
               content.fill()

图像

                  var img=new Image()
                   img.src="./img/1.jpg"
                   content.drawImage(img,10,10,100,100)//（图像，,x,y,w,h）
                   content.drawImage(img,10,10,100,100,200,100,200,100)//(图像,x,y,w,h,x1,y1,w1,h1)裁剪后防治位置

清除区域clearRect

    content.fillStyle="red"
    content.fillRect(0,0,200,200)
    content.fill()
    content.clearRect(10,10,50,50)