繪制圓形

需要執(zhí)行如下步驟：
開始創(chuàng)建路徑
使用圖形上下文對象的beginPath方法。

context.beginPath();
該方法不使用參數(shù)功偿，通過該方法開始路徑的創(chuàng)建盆佣。在幾次循環(huán)的創(chuàng)建路徑的過程中，每次開始創(chuàng)建時都要調(diào)用beginPath()方法。

創(chuàng)建圖形的路徑
創(chuàng)建圓形路徑時共耍，需要使用圖形上下文對象的arc方法虑灰。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
該方法使用6個參數(shù)，x為繪制圓形的起點橫坐標痹兜，y為繪制圓形的起點縱坐標穆咐，radius為圓形半徑，startAngle為開始角度佃蚜，endAngle為結(jié)束角度庸娱，anticlockwise為是否按順時針方向進行繪制。anticlockwise參數(shù)為一個布爾值的參數(shù)谐算，為true時熟尉，按順時針繪制，為false時洲脂，按逆時針繪制斤儿。

路徑創(chuàng)建完成后，關(guān)閉路徑
使用圖形上下文對象的closePath方法將路徑閉合恐锦。

context.closePath();
將路徑閉合后往果，路徑的創(chuàng)建工作就完成了，但這時只是路徑創(chuàng)建完畢一铅，還沒有真正繪制圖形陕贮。

設定繪制樣式，調(diào)用繪制方法潘飘，繪制路徑
使用fill()肮之、stroke()、fillStyle()和strokeStyle()指定繪制樣式卜录。

  var context = canvas.getContext('2d');
  context.fillStyle = '#cccccc';
  context.fillRect(0, 0, 400, 400);
  var n = 0;
  for(var i = 0;i<10; i++) {
    context.beginPath();
    context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = 'rgba(255,0,255, 0.25)';
    context.fill();
  }

效果如下：

QQ截圖20200708103334.jpg

繪制漸變圖形

繪制線性漸變

漸變是指在填充時從一種顏色慢慢過渡到另一種顏色戈擒。最簡單的是兩點之間的線性漸變。
繪制線性漸變時艰毒，需要使用到LinearGradient對象筐高，可以使用圖形上下文對象的createLinearGradient()方法創(chuàng)建該對象。

context.createLinearGradient(xStart, yStart, xEnd, yEnd);
該方法有4個參數(shù)丑瞧，xStart為漸變起始點的橫坐標柑土，yStart為漸變起始點的縱坐標，xEnd為漸變結(jié)束點的橫坐標绊汹，yEnd為漸變結(jié)束點的縱坐標冰单。
在創(chuàng)建linearGradient對象后，使用addColorStop()方法設定漸變的顏色灸促。

context.addColorStop(offset, color);
offset參數(shù)為所設定的顏色離開漸變起始點的偏移量诫欠，該參數(shù)的值是一個范圍在0~1之間的浮點值涵卵，漸變起始點的偏移量為0，漸變結(jié)束點的偏移量為1荒叼。color為繪制時的顏色轿偎。
因為是漸變，所以至少需要使用兩次addColorStop方法以追加兩個顏色（開始顏色和結(jié)束顏色）被廓，可以追加多個顏色坏晦。例如從藍色漸變到白色然后漸變到綠色。這時藍色的位移量為0嫁乘，白色的位移量為0.5昆婿，綠色的位移量為1。
接著把fillStyle或strokeStyle設定為linearGradient對象蜓斧，然后執(zhí)行填充的方法仓蛆，就可以繪制漸變圖形了。

  var context = canvas.getContext('2d');
  var g1 = context.createLinearGradient(0, 0, 0, 300);
  g1.addColorStop(0, 'rgb(255, 255, 0)');
  g1.addColorStop(1, 'rgb(0, 255, 255)');
  context.fillStyle = g1;
  context.fillRect(0, 0, 400, 320);
  var n = 0;
  var g2 = context.createLinearGradient(0, 0, 300, 0);
  g2.addColorStop(0, 'rgba(0, 0, 255, 0.5)');
  g2.addColorStop(1, 'rgba(255, 0, 0, 0.5)');
  for(var i = 0; i < 10; i++) {
    context.beginPath();
    context.fillStyle = g2;
    context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
  }

效果如圖：

image.png

給圖形繪制陰影

使用Canvas元素可以給圖形添加陰影效果挎春。
圖形上下文對象的關(guān)于陰影繪制的屬性：

shadowOffsetX：陰影的橫向位移量看疙，默認為0。
shadowOffsetY：陰影的縱向位移量直奋，默認為0能庆。
shadowColor：陰影的顏色。
shadowBlur：陰影的模糊范圍脚线，可選搁胆。屬性值是比0大的數(shù)字，否則將被忽略邮绿。

 function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas == null) { return false; }
    var context = canvas.getContext('2d');
    context.fillStyle = "#ffffff";
    context.fillRect(0, 0, 400, 300);
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowColor = 'rgba(120,120,120,0.5)';
    context.shadowBlur = 7.5;
    // 圖形繪制
    context.translate(0,50);
    for(var i = 0;i < 3;i++){
      context.translate(50,50);
      create5Star(context);
      context.fill();
    }
  }
  function create5Star(context) {
    var n = 0;
    var dx = 100;
    var dy = 0;
    var s = 50;
    //創(chuàng)建路徑
    context.beginPath();
    context.fillStyle = 'rgba(255,215,0,0.5)';
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI / 5 * 4;
    for(var i = 0; i < 5; i++) {
      var x = Math.sin(i * dig);
      var y = Math.cos(i * dig);
      context.lineTo( dx + x * s,dy + y * s);
    }
    context.closePath();
  }
  draw()