绘制圆形

需要执行如下步骤：
开始创建路径
使用图形上下文对象的beginPath方法。

context.beginPath();
该方法不使用参数，通过该方法开始路径的创建。在几次循环的创建路径的过程中，每次开始创建时都要调用beginPath()方法。

创建图形的路径
创建圆形路径时，需要使用图形上下文对象的arc方法。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
该方法使用6个参数，x为绘制圆形的起点横坐标，y为绘制圆形的起点纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。anticlockwise参数为一个布尔值的参数，为true时，按顺时针绘制，为false时，按逆时针绘制。

路径创建完成后，关闭路径
使用图形上下文对象的closePath方法将路径闭合。

context.closePath();
将路径闭合后，路径的创建工作就完成了，但这时只是路径创建完毕，还没有真正绘制图形。

设定绘制样式，调用绘制方法，绘制路径
使用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()方法创建该对象。

context.createLinearGradient(xStart, yStart, xEnd, yEnd);
该方法有4个参数，xStart为渐变起始点的横坐标，yStart为渐变起始点的纵坐标，xEnd为渐变结束点的横坐标，yEnd为渐变结束点的纵坐标。
在创建linearGradient对象后，使用addColorStop()方法设定渐变的颜色。

context.addColorStop(offset, color);
offset参数为所设定的颜色离开渐变起始点的偏移量，该参数的值是一个范围在0~1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1。color为绘制时的颜色。
因为是渐变，所以至少需要使用两次addColorStop方法以追加两个颜色（开始颜色和结束颜色），可以追加多个颜色。例如从蓝色渐变到白色然后渐变到绿色。这时蓝色的位移量为0，白色的位移量为0.5，绿色的位移量为1。
接着把fillStyle或strokeStyle设定为linearGradient对象，然后执行填充的方法，就可以绘制渐变图形了。

  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元素可以给图形添加阴影效果。
图形上下文对象的关于阴影绘制的属性：

shadowOffsetX：阴影的横向位移量，默认为0。
shadowOffsetY：阴影的纵向位移量，默认为0。
shadowColor：阴影的颜色。
shadowBlur：阴影的模糊范围，可选。属性值是比0大的数字，否则将被忽略。

 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;
    //创建路径
    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()