canvas渐变和canvas文本

图形渐变

• 在画布上创建一个渐变对象
  var grd = context.createLinearGradient(x1,y1,x2,y2)

      x1,y1 - 基准线的起点坐标值
      x2,y2 - 基准线的终点坐标值
    
    var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2) 
  
     x1,y1 - 第一个基准圆的元素坐标值
     r1 - 第一个基准圆的半径
  
     x2,y2,r2同上
  

• 给渐变对象指定渐变颜色值
  addColorStop(position,color)

  position - 指设置渐变颜色的位置(0-1)
  

• 将渐变对象作为画布对象的颜色
  context.fillStyle = grd;

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

canvas文本

canvas绘制文字

• 首先在body里创建canvas标签
  <canvas id="canvas" width="400px" height="400px"></canvas>

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

• 第三步，获取画布对象
  var context = canvas.getContext("2d");

• 第四步，使用canvas的API绘制文字
  //1.设置文本的样式
  context.font = "bold 20px 微软雅黑";

  //2.绘制文本
  fillText(text,x,y);//x，y是文字左下角的位置
  
  //水平对齐方式，值可以是left、right和center 
    textAlign
     //绘制文本的基准线
       context.beginPath();
       context.moveTo(200,0);
       context.lineTo(200,400);
       context.stroke();
      
       //注意：textAlign的值都指的是基准线相对与文本的位置，步骤是先通过文字确定基准线的位置，再将文字移动到相应的位置
       context.textAlign = "left/center/height";
  // 文本基线,设置垂直方向对齐,值可以是top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）
    textBaseline用法参考textAlign
  

canvas-设置阴影

• 使用CSS语法声明阴影颜色
  context.shadowColor = "aqua";
• 确定对象阴影的水平投射距离
  context.shadowOffsetX = 5;
• 确定对象阴影的垂直投射距离
  context.shadowOffsetY = 5;
• 为阴影生成模糊效果
  context.shadowBlur = 12;

canvas-创建路径-绘制矩形和圆形

• 使用路径来创建图形
  只要单独使用路径，就要有beginPath方法
  // 初始化路径
  context.beginPath();
  // 绘制路径
  context.rect(100,100,100,100);
  context.fill();

  设置圆形形状
  /*arc(x,y,radius,startAngle,endAngle,direction)
   * x,y代表原点位置
   * radius 圆的半径
   * startAngle 开始角度
   * endAngle 结束角度
   * direction 方向 false代表顺时针，true代表顺时针
   */
    context.beginPath();
    context.arc(50,50,50,0,0.5*Math.PI,true);
    context.closePath();
    context.stroke();
  

• 直接绘制和路径绘制的区别
  /* 直接绘制不需要beginPath()，路径绘制必须要beginPath()
  * fillRect() = rect() + fill();
  * 如果想要闭合空心半圆，使用closePath()
  */