填充和描邊的顏色

• fillStyle : 設(shè)置或返回用于填充繪畫的顏色

• strokeStyle: 設(shè)置或返回用于筆觸的顏色

• 兩者可能的值: 16進(jìn)制數(shù)據(jù)师坎，rgb值乙嘀，甚至rgba. 一般先進(jìn)行設(shè)置樣式然后進(jìn)行繪制叉存。

        ctx.strokeStyle = "red";
        ctx.strokeStyle = "#ccc";
        ctx.strokeStyle = "rgb(255,0,0)";
        ctx.strokeStyle = "rgba(255,0,0,6)";
  

設(shè)置陰影

• shadowColor： 設(shè)置或返回用于陰影的顏色

• shadowBlur： 設(shè)置或返回用于陰影的模糊級(jí)別,大于1的正整數(shù)躏仇，數(shù)值越高，模糊程度越大

• shadowOffsetX： 設(shè)置或返回陰影距形狀的水平距離

• shadowOffsetY： 設(shè)置或返回陰影距形狀的垂直距離

        ctx.fillStyle = "rgba(255,0,0, .9)"
        ctx.shadowColor = "teal";
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;
        ctx.fillRect(100, 100, 100, 100);
        //設(shè)置png圖片的陰影愁憔，圖片透明部分不會(huì)被投影。
  

變換

1. 縮放

   • context.scale(scalewidth,scaleheight) 縮放當(dāng)前繪圖孽拷，更大或更小
     • scalewidth : 縮放當(dāng)前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)
     • scaleheight : 縮放當(dāng)前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意：縮放的是整個(gè)畫布吨掌，縮放后，繼續(xù)繪制的圖形會(huì)被放大或縮小。

2. 位移畫布

   • ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置
     • x： 添加到水平坐標(biāo)（x）上的值
     • y： 添加到垂直坐標(biāo)（y）上的值
   • 發(fā)生位移后膜宋，相當(dāng)于把畫布的0,0坐標(biāo) 更換到新的x,y的位置窿侈，所有繪制的新元素都被影響。
     位移畫布一般配合縮放和旋轉(zhuǎn)等秋茫。

3. 旋轉(zhuǎn)

   • context.rotate(angle); 方法旋轉(zhuǎn)當(dāng)前的繪圖
     • 注意參數(shù)是弧度（PI）
     • 如需將角度轉(zhuǎn)換為弧度史简，請(qǐng)使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算。

4. 繪制環(huán)境保存/還原-配合位移畫布使用

   • ctx.save() 保存當(dāng)前環(huán)境的狀態(tài)
     • 可以把當(dāng)前繪制環(huán)境進(jìn)行保存到緩存中肛著。
   • ctx.restore() 返回之前保存過(guò)的路徑狀態(tài)和屬性
     • 獲取最近緩存的ctx

5. 設(shè)置繪制環(huán)境的透明度

   • context.globalAlpha=number;
     • number:透明值圆兵。必須介于 0.0（完全透明） 與 1.0（不透明） 之間。
     • 設(shè)置透明度是全局的透明度的樣式枢贿。注意是全局的殉农。

6. 畫布限定區(qū)域繪制

   • ctx.clip(); 方法從原始畫布中剪切任意形狀和尺寸
     • 一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)（不能訪問(wèn)畫布上的其他區(qū)域）
     • 一般配合繪制環(huán)境的保存和還原局荚。

畫布保存base64編碼內(nèi)容

• canvas.toDataURL(type, encoderOptions);canvas繪制的內(nèi)容輸出成base64內(nèi)容超凳。
• 例如：canvas.toDataURL("image/jpg",1);
• 參數(shù)說(shuō)明

  • type，設(shè)置輸出的類型危队，比如 image/png image/jpeg等

  • encoderOptions： 0-1之間的數(shù)字聪建，用于標(biāo)識(shí)輸出圖片的質(zhì)量钙畔，1表示無(wú)損壓縮茫陆，類型為： image/jpeg 或者image/webp才起作用。

          案例1：
          var canvas = document.getElementById("canvas");
          var dataURL = canvas.toDataURL();
          console.log(dataURL);
          // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
          // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
      
          var img = document.querySelector("#img-demo");//拿到圖片的dom對(duì)象
          img.src = canvas.toDataURL("image/png");      //將畫布的內(nèi)容給圖片標(biāo)簽顯示
    

畫布渲染畫布

• context.drawImage(img,x,y); img參數(shù)也可以是畫布擎析，也就是把一個(gè)畫布整體的渲染到另外一個(gè)畫布上簿盅。

        var canvas1 = document.querySelector('#cavsElem1');
        var canvas2 = document.querySelector('#cavsElem2');
        var ctx1 = canvas1.getContext('2d');
        var ctx2 = canvas2.getContext('2d');
        ctx1.fillRect(20, 20, 40, 40);      //在第一個(gè)畫布上繪制矩形       
        ctx2.drawImage(canvas1, 10, 10);    //將第一個(gè)畫布整體繪制到第二個(gè)畫布上
  

創(chuàng)建線性漸變的樣式-了解

• 語(yǔ)法：ctx.createLinearGradient(x0,y0,x1,y1); //參數(shù)：x0,y0起始坐標(biāo)，x1,y1結(jié)束坐標(biāo)

• 一般不用揍魂，都是用圖片代替桨醋，canvas繪制圖片效率更高。

• 線性漸變可以用于 矩形现斋、圓形喜最、文字等顏色樣式

• 線性漸變是一個(gè)對(duì)象

      //創(chuàng)建線性漸變的對(duì)象，
      var grd=ctx.createLinearGradient(0,0,170,0);
      //添加一個(gè)漸變顏色庄蹋，第一個(gè)參數(shù)介于0-1的值瞬内，表示漸變中開(kāi)始與結(jié)束之間的位置。
      grd.addColorStop(0,"black");  
      grd.addColorStop(1,"white");  //添加一個(gè)漸變顏色
      ctx.fillStyle =grd;           //關(guān)鍵點(diǎn)限书，把漸變?cè)O(shè)置到 填充的樣式
  

設(shè)置圓形漸變/徑向漸變- 了解

• 定義: 創(chuàng)建放射狀/圓形漸變對(duì)象虫蝶。可以填充文本倦西、形狀等
• context.createRadialGradient(x0,y0,r0,x1,y1,r1);

  • x0: 漸變的開(kāi)始圓的 x 坐標(biāo)

  • y0: 漸變的開(kāi)始圓的 y 坐標(biāo)

  • r0: 開(kāi)始圓的半徑

  • x1: 漸變的結(jié)束圓的 x 坐標(biāo)

  • y1: 漸變的結(jié)束圓的 y 坐標(biāo)

  • r1: 結(jié)束圓的半徑

          var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
          rlg.addColorStop(0, 'teal');    //添加一個(gè)漸變顏色
          rlg.addColorStop(.4, 'navy');
          rlg.addColorStop(1, 'purple');
          ctx.fillStyle = rlg;//設(shè)置 填充樣式為延續(xù)漸變的樣式
          ctx.fillRect(100, 100, 500, 500);
    

繪制背景圖-了解

• 定義: ctx.createPattern(img,repeat) 方法在指定的方向內(nèi)重復(fù)指定的元素
• 第一參數(shù)：設(shè)置平鋪背景的圖片能真，第二個(gè)背景平鋪的方式。

  • image ： 規(guī)定要使用的圖片、畫布或視頻元素粉铐。

  • repeat ： 默認(rèn)疼约。該模式在水平和垂直方向重復(fù)。

  • repeat-x ： 該模式只在水平方向重復(fù)蝙泼。

  • repeat-y ： 該模式只在垂直方向重復(fù)忆谓。

  • no-repeat： 該模式只顯示一次（不重復(fù)）。

          var ctx=c.getContext("2d");
          var img=document.getElementById("lamp");
          var pat=ctx.createPattern(img,"repeat");
          ctx.rect(0,0,150,100);
          ctx.fillStyle=pat;//  把背景圖設(shè)置給填充的樣式
          ctx.fill();