canvas学习总结（二）

一、样式设置

1、线条样式

canvas中提供了lineWidth的属性用于改变绘制出的线条宽度，语法为：

​ 画笔对象.lineWidth = 数值;

设置此属性时，数值可以不带单位(px)，线宽一旦设置后，后面的图形将会一直使用该样式，除非手动去除或更改。

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //绘制参考线
    context.moveTo(300,0);
    context.lineTo(300,400);
    context.strokeStyle = 'red';//参考线颜色设置为红色
    context.stroke();
    //绘制线条
    context.strokeStyle = 'blue';//为形成对比将线条颜色改为蓝色
    //默认线条
    context.beginPath();
    context.moveTo(300,100);
    context.lineTo(500,100);
    context.stroke();
    //改变线宽
    context.beginPath();
    context.lineWidth = 40;//线宽变为40
    context.moveTo(300,250);
    context.lineTo(500,250);
    context.stroke();
</script>

线条宽度

2、线形设置

canvas中可以使用lineCap属性设置绘制出的线条形状，语法为：

​ 画笔对象.lineCap =‘butt||round||square’;

默认值为butt，不使用此属性时默认使用这种样式；

round线形两端为圆弧；

square属性值，线形两端为方形，由于此种样式与默认值样式类似，不建议使用；

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //绘制参考线
    context.moveTo(300,0);
    context.lineTo(300,400);
    context.strokeStyle = 'red';
    context.stroke();
    //绘制线条
    //为了便于观察样式变化，改变线条宽度,并改变颜色
    context.lineWidth = 40;
    context.strokeStyle = 'blue';
    context.beginPath();
    //默认样式线条
    context.moveTo(300,50);
    context.lineTo(500,50);
    context.stroke();
    //样式值为butt，样式值为默认值，无变化
    context.beginPath();
    context.moveTo(300,150);
    context.lineTo(500,150);
    context.lineCap ='butt';
    context.stroke();
    //样式值为round，线条两端为弧形
    context.beginPath();
    context.moveTo(300,250);
    context.lineTo(500,250);
    context.lineCap ='round';
    context.stroke();
    //样式值为square，线条两端为方形
    //由于这种样式于默认状态较为相似，不建议使用
    context.beginPath();
    context.moveTo(300,350);
    context.lineTo(500,350);
    context.lineCap ='square';
    context.stroke();
</script>

线条样式

二、颜色设置

canvas默认的颜色为黑色，提供了两种属性更改描边的颜色以及填充的颜色。

1、描边颜色

语法：

​ 画笔对象.strokeStyle = 'color';

color的设置必须为字符串格式，可以使用英文单词，16进制颜色，rgb颜色，rgba颜色进行设置；

颜色设置之后，如果不手动改变设置，后续的图形会继续使用最近一次的设置进行描边。

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //为了方便观察将线宽设置为20
    context.lineWidth = 20;
    //默认颜色
    context.beginPath();
    context.moveTo(100,0);
    context.lineTo(100,400);
    context.stroke();
    //线性颜色设置
    //英文单词颜色
    context.beginPath();
    context.moveTo(200,0);
    context.lineTo(200,400);
    context.strokeStyle = 'red';
    context.stroke();
    //16进制颜色
    context.beginPath();
    context.moveTo(300,0);
    context.lineTo(300,400);
    context.strokeStyle = '#03f20d';
    context.stroke();
    //rgb颜色
    context.beginPath();
    context.moveTo(400,0);
    context.lineTo(400,400);
    context.strokeStyle = 'rgb(0,255,255)';
    context.stroke();
    //rgba颜色
    context.beginPath();
    context.moveTo(500,0);
    context.lineTo(500,400);
    context.strokeStyle = 'rgba(255,0,255,0.5)';
    context.stroke();
</script>

线条颜色

2、填充颜色

语法：

​ 画笔对象.fillStyle = 'color';

color的值的设定与描边颜色相同，不手动更改，后续图形继续使用最近一次的设置进行填充。

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    //默认填充颜色
    context.fillRect(100,100,100,100);
    context.beginPath();
    //改变填充颜色
    //fillStyle与strokeStyle一样可以使用英文单词，16进制颜色，rgb颜色和rgba颜色进行设置。
    context.fillStyle = 'skyblue';
    context.fillRect(300,100,100,100);
</script>

填充颜色

三、阴影设置

canvas提供了一些属性用于绘制阴影，使得绘制出的图形更有立体感。

• shadowOffsetX用于设置阴影的X轴偏移量，正值向右偏移，负值向左偏移；

• shadowOffsetX用于设置阴影的Y轴偏移量，正值向下偏移，负值向上偏移；

• shadowColor设置阴影的颜色，可以使用英文单词，16进制颜色，rgb颜色以及rgba颜色设置；

• shadowBlur用来设置阴影颜色的模糊度，数值越大越模糊；

  <canvas id="canvas" width="600px" height="400px"></canvas>
  <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
  
      //无阴影效果
      context.fillStyle = 'hotpink';
      context.fillRect(50,50,100,100);
  
      //设置阴影效果
      context.shadowColor = 'blue';//设置阴影颜色
      context.shadowOffsetX = 10;//设置阴影的x轴偏移量，正值为向右，    负值为向左
      context.shadowOffsetY = 10;//设置阴影的y轴偏移量，正值为向下，负值为向上
      context.shadowBlur = 10;//设置阴影颜色的模糊度
      context.beginPath();
      context.fillRect(200,50,100,100);
      //阴影效果与线条宽度，形状，颜色都属于全局类样式，如果不手动修改，之后的样式都会使用最后设置的样式
      context.beginPath();
      context.fillRect(400,50,100,100);
  </script>
  

阴影

四、渐变

canvas提供了类似CSS3中的颜色渐变效果，需要在绘制图形之前创建一个渐变对象，设置一定的属性，最后将该对象赋值给颜色样式进行使用。

渐变分为线性渐变和径向渐变两种。

1、线性渐变

canvas的线性渐变是创建一个线性渐变对象之后，与这个对象平行的区域内的所有图形都会有线性渐变的效果。

• 首先需要创建一个线性渐变对象，语法为：

  var 对象名= 画笔对象.createLinearGradient(x0,y0,x1,y1);

  其中，x0,y0为渐变对象起始的坐标位置，x1,y1为渐变对象结束的坐标位置；

• 使用addColorStop(offset,color)设置渐变颜色，语法为：

  对象名.addColorStop(offset,color);

  其中，offset为颜色位置，color为设置的颜色。在线性渐变中，从渐变的起始位置到渐变的结束位置分别为0和1，offset的值为小数，通过设置多个颜色，达到渐变的效果。

• 设置结束后将对象赋值给描边颜色和填充颜色。

  <canvas id="canvas" width="600px" height="400px"></canvas>
  <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      //线性渐变
      //创建渐变对象var gradient = context.createLinearGradient(x0,y0,x1,y1);
      var gradient = context.createLinearGradient(100,100,500,100);
      //设置渐变颜色gradient.addColorStop(offset,color)
      gradient.addColorStop(0,'red');
      gradient.addColorStop(1/6,'orange');
      gradient.addColorStop(2/6,'yellow');
      gradient.addColorStop(3/6,'green');
      gradient.addColorStop(4/6,'cyan');
      gradient.addColorStop(5/6,'blue');
      gradient.addColorStop(1,'purple');
      //将渐变对象赋值
      context.fillStyle = gradient;
      context.strokeStyle = gradient;
      //绘制图形
      //画线
      context.moveTo(100,50);
      context.lineTo(500,50);
      context.stroke();
      //画封闭图形
      context.beginPath();
      context.fillRect(100,100,400,200);
      context.fill();
  </script>
  

线性渐变

2、径向渐变

相对与线性渐变，径向渐变是在创建的渐变区域内扩散的变化。与线性渐变类似，需要先创建一个渐变对象。

• 创建径向渐变对象，语法为：

  var 对象名 = 画笔对象.createRadialGradient(x0, y0, r0, x1, y1, r1);

  其中，x0, y0, r0为起始点的中心点坐标以及半径，x1, y1, r1为终止点的中心点坐标和半径。

• 与线性渐变一样，使用addColorStop(offset,color)设置渐变颜色，起始点位置为0，终止点位置为1。

• 设置结束后将对象赋值给描边颜色和填充颜色。

  <canvas id="canvas" width="600px" height="400px"></canvas>
  <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      //创建两个圆对象
      var c1 = {
          x:300,
          y:200,
          r:80
      };
      var c2 = {
          x:300,
          y:200,
          r:150
      }
      //创建渐变对象
      var gradient = context.createRadialGradient(c1.x,c1.y,c1.r,c2.x,c2.y,c2.r);
      //设置渐变颜色
      gradient.addColorStop(0,'purple');
      gradient.addColorStop(1/6,'blue');
      gradient.addColorStop(2/6,'cyan');
      gradient.addColorStop(3/6,'green');
      gradient.addColorStop(4/6,'yellow');
      gradient.addColorStop(5/6,'orange');
      gradient.addColorStop(1,'red');
      context.fillStyle = gradient;
      context.strokeStyle = gradient;
      //绘制图形
      context.arc(c1.x,c1.y,c1.r,0,2*Math.PI,true);
      context.arc(c2.x,c2.y,c2.r,0,2*Math.PI);
      context.fill();
  </script>
  

径向渐变

五、绘制文字

canvas中可以使用strokeText()或者fillText()进行文字的绘制。同时提供了文字样式的设置属性。

其中strokeText()绘制的是镂空文字，文字只有边框，fillText()绘制的是填充文字。

1、文字样式

font属性可以设置文字的大小和样式，语法：

​ 画笔对象.font = ‘size family’

其中size为字体的大小，family为字体样式，例如：

​ context.font = '40px 微软雅黑';

这样就将文字设置成了40px大小，微软雅黑字体。

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //绘制参考线
    context.moveTo(300,0);
    context.lineTo(300,400);
    context.stroke();
    //设置字体大小和样式
    context.font = '40px 微软雅黑';
    //绘制镂空文字
    context.strokeText('镂空文字',300,100);
    //绘制填充文字
    context.fillText('填充文字',300,200);
</script>

文字样式

2、文字对齐方式

绘制出的文字除了可以设置大小和样式，还可以对文字的对齐方式进行设置。

2.1水平对齐方式

语法：

​ 画笔对象.textAlign = ‘left||center||right’;

默认状态为left，左对齐；

center为居中对齐；right为右对齐;

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //绘制参考线
    context.moveTo(300,0);
    context.lineTo(300,400);
    context.stroke();
    //设置字体样式
    context.font ='30px 微软雅黑';
    //绘制字体
    //字体水平对齐设置textAlign
    //默认水平对齐方式为左对齐
    context.textAlign = 'left';
    context.fillText('left',300,100);
    //设置水平居中对齐
    context.textAlign = 'center';
    context.fillText('center',300,200);
    //设置水平右对齐
    context.textAlign = 'right';
    context.fillText('right',300,300);
</script>

水平对齐

2.2垂直对齐方式

语法：

​ 画笔对象.textBaseline = ‘top||middle||bottom’;

默认状态为基线对齐；

top为顶对齐；middle为中线对齐；bottom为底对齐；

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //绘制参考线
    context.moveTo(0,200);
    context.lineTo(600,200);
    context.stroke();
    //设置字体样式
    context.font ='30px 微软雅黑';
    //绘制字体
    //字体垂直对齐设置textBaseline,默认垂直对齐方式为基线对齐
    //设置垂直顶部对齐
    context.textBaseline = 'top';
    context.fillText('top',100,200);
    //设置垂直居中对齐
    context.textBaseline = 'middle';
    context.fillText('middle',200,200);
    //设置垂直底部对齐
    context.textBaseline = 'bottom';
    context.fillText('bottom',400,200);
</script>

垂直对齐

3、应用（带文字折线图）

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //模拟数据
    var dataArr = [17,63,12,90,98];
    //横坐标数据
    var monthArr = ['1月','2月','3月','4月','5月'];
    //绘制坐标系
    context.moveTo(50,50);
    context.lineTo(50,canvas.height-50);
    context.lineTo(canvas.width-50,canvas.height-50);
    context.stroke();
    //计算坐标
    //计算横坐标间隔
    var gapX = (canvas.width-100)/(dataArr.length-1);
    //存贮坐标的数组
    var pointArr = [];
    for(var i = 0;i<dataArr.length;i++){
        var x = 50+gapX*i;
        var y = canvas.height-50-(canvas.height-100)/100*dataArr[i];
        var point = {
            x: x,
            y:y
        }
        pointArr.push(point);
    }
    //绘制折线图
    context.beginPath();
    context.moveTo(pointArr[0].x,pointArr[0].y);
    for(var j = 1;j<pointArr.length;j++){
        context.lineTo(pointArr[j].x,pointArr[j].y);
    }
    context.stroke();
    //绘制文字
    for(var k = 0;k<monthArr.length;k++){
        context.textBaseline = 'top';
        context.textAlign ='center';
        context.fillText(monthArr[k],pointArr[k].x,350);
        //判断文字对齐方式
        if(dataArr[k]>dataArr[k+1]){
            context.textBaseline = 'bottom';
        }else{
            context.textBaseline = 'top';
        }
        context.textAlign = 'left';
        context.fillText(dataArr[k],pointArr[k].x,pointArr[k].y);
    }
</script>

折线图

六、绘制图片

除了自己绘制图形和文字，面对一些复杂的图形，可以使用制作好的图片，因此canvas提供了绘制图片的的方法。

在绘制之前需要创建一个图片对象，并且在图片加载完成之后再进行绘制。

canvas绘制图片使用drawImage()方法，根据传入的参数不同分为三参数，五参数和九参数。

1、三参数

三参数，即传入drawImage()的参数为三个，分别为element,x,y，语法：

​ 画笔对象.drawImage(element,x,y);

其中，element为图片对象，x,y为绘制的起点坐标。

三参数模式是将图片原封不动的绘制到画布上。

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//创建图片对象
var imges = new Image();
imges.src = 'img/gls.jpg';
//图片加载完成
imges.onload = function () {
    //三参数模式
    /*context.drawImage(imges,x,y);
    element为图片对象
    x,y为图片绘制的起始坐标点
    三参模式是将图片原封不动的画在画布上
    * */
    context.drawImage(imges,0,0);
}
</script>

三参数

2、五参数

五参数，即传入五个参数，分别为element,x,y,w,h，语法：

​ 画笔对象.drawImage(element,x,y,w,h);

其中，element为图片对象，x,y为绘制的起点坐标，w,h为绘制的宽高。

五参数模式会对图片进行缩放处理。

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//创建图片对象
var images = new Image();
images.src = 'img/pig.jpg';
//图片加载完成
images.onload = function (){
    //绘制图片-五参数模式
    /*context.drawImage(element,x,y,w,h);
    element为图片对象
    x,y,w,h为图片绘制的起始坐标和绘制宽高，五参模式可以对图片进行缩放处理
    */
    context.drawImage(images,0,0,300,200);
}
</script>

五参数

3、九参数

九参数，即传入九个参数，分别为element,x0,y0,w0,h0,x1,y1,w1,h1，语法：

​ 画笔对象.drawImage(element,x0,y0,w0,h0,x1,y1,w1,h1);

其中，element为图片对象，x0,y0为图片绘制的起点坐标，w0,h0为图片绘制的宽高，x1,y1为画布上绘制的起点坐标，w1,h1为绘制在画布上的宽高。

九参数模式会对图片进行切割处理。

<canvas id="canvas" width="600px" height="400px"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//创建图片对象
var images = new Image();
images.src = 'img/pig.jpg';
//图片加载
images.onload = function(){
    //绘制图片-九参数模式
    //context.drawImage(element,x0,y0,w0,h0,x1,y1,w1,h1);
    /*
    element为图片对象，x0,y0,w0,h0为截取图片的坐标起始位置和截取图片的宽高；
     x1,y1,w1,h1为截取图片绘制在画布上的坐标起始位置和绘制的宽高
     九参模式可以对图片进行切割处理
    */
    context.drawImage(images,800,400,300,200,0,0,150,100);
}
</script>

原图 九参数