圖形漸變

• 在畫布上創(chuàng)建一個(gè)漸變對(duì)象
  var grd = context.createLinearGradient(x1,y1,x2,y2)

      x1,y1 - 基準(zhǔn)線的起點(diǎn)坐標(biāo)值
      x2,y2 - 基準(zhǔn)線的終點(diǎn)坐標(biāo)值
    
    var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2) 
  
     x1,y1 - 第一個(gè)基準(zhǔn)圓的元素坐標(biāo)值
     r1 - 第一個(gè)基準(zhǔn)圓的半徑
  
     x2,y2,r2同上
  

• 給漸變對(duì)象指定漸變顏色值
  addColorStop(position,color)

  position - 指設(shè)置漸變顏色的位置(0-1)
  

• 將漸變對(duì)象作為畫布對(duì)象的顏色
  context.fillStyle = grd;

• 繪制
  context.fillRect(0,0,400,400);

canvas文本

canvas繪制文字

• 首先在body里創(chuàng)建canvas標(biāo)簽
  <canvas id="canvas" width="400px" height="400px"></canvas>

• 第二步，在js里獲取到canvas
  var canvas = document.getElementById("canvas");

• 第三步，獲取畫布對(duì)象
  var context = canvas.getContext("2d");

• 第四步，使用canvas的API繪制文字
  //1.設(shè)置文本的樣式
  context.font = "bold 20px 微軟雅黑";

  //2.繪制文本
  fillText(text,x,y);//x，y是文字左下角的位置
  
  //水平對(duì)齊方式，值可以是left、right和center 
    textAlign
     //繪制文本的基準(zhǔn)線
       context.beginPath();
       context.moveTo(200,0);
       context.lineTo(200,400);
       context.stroke();
      
       //注意：textAlign的值都指的是基準(zhǔn)線相對(duì)與文本的位置，步驟是先通過文字確定基準(zhǔn)線的位置，再將文字移動(dòng)到相應(yīng)的位置
       context.textAlign = "left/center/height";
  // 文本基線,設(shè)置垂直方向?qū)R,值可以是top、middle和bottom，alphabetic（默認(rèn)值，字母基線）hanging（ 懸掛基線）
    textBaseline用法參考textAlign
  

canvas-設(shè)置陰影

• 使用CSS語法聲明陰影顏色
  context.shadowColor = "aqua";
• 確定對(duì)象陰影的水平投射距離
  context.shadowOffsetX = 5;
• 確定對(duì)象陰影的垂直投射距離
  context.shadowOffsetY = 5;
• 為陰影生成模糊效果
  context.shadowBlur = 12;

canvas-創(chuàng)建路徑-繪制矩形和圓形

• 使用路徑來創(chuàng)建圖形
  只要單獨(dú)使用路徑，就要有beginPath方法
  // 初始化路徑
  context.beginPath();
  // 繪制路徑
  context.rect(100,100,100,100);
  context.fill();

  設(shè)置圓形形狀
  /*arc(x,y,radius,startAngle,endAngle,direction)
   * x,y代表原點(diǎn)位置
   * radius 圓的半徑
   * startAngle 開始角度
   * endAngle 結(jié)束角度
   * direction 方向 false代表順時(shí)針，true代表順時(shí)針
   */
    context.beginPath();
    context.arc(50,50,50,0,0.5*Math.PI,true);
    context.closePath();
    context.stroke();
  

• 直接繪制和路徑繪制的區(qū)別
  /* 直接繪制不需要beginPath()，路徑繪制必須要beginPath()
  * fillRect() = rect() + fill();
  * 如果想要閉合空心半圓，使用closePath()
  */