使用样式和颜色

---

色彩 colors

如果想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。

fillStyle = color
设置图形的填充颜色。

strokeStyle = color
设置图形轮廓的颜色。

color可以是表示css颜色值的字符串，渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色的（#000000）。

下面的例子表示的都是同一种例子:

//这些fillStyle的值均为‘橙色’
ctx.fillStyle = 'orange'
ctx.fillStyle = '#ffa500'
ctx.fillStyle = 'rgb(255,165,0)'
ctx.fillStyle = 'rbga(155,165,0,1)'

fillStyle 示例

function draw(){
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i=0;i<6;i++){
        for (var j=0;j<6;j++){
            ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + 
                       Math.floor(255-42.5*j) + ',0)';
            ctx.fillRect(j*25,i*25,25,25);
        }
    }
}

QQ图片20171103085448.png

渐变 Gradients

像一般的绘图软件一样，可以使用线性或者径向的渐变来填充或者描边。

使用下面的方法新建一个 canvasGradient 对象，并且赋值给图形的 fillStyle 或者 strokeStyle 属性。

createLinearGradient(x1,y1,x2,y2)
createLinearGradient 方法接受4个参数，表示渐变的起点（x1,y1） 与终点 （x2,y2）。

createRadialGradient(x1,y1,r1,x2,y2,r2)
createRadialGradient(x1,y1,r1,x2,y2,r2) 方法接受6个参数，前三个定义一个以（x1,y1）为圆心，半径为r1的圆，后三个参数定义另一个以（x2,y2）为圆心，半径为r2的圆。

let lineGradient = ctx.createLinearGradient(0,0,150,150)
let radialGradient = ctx.createLinearGradient(75,75,0,75,75,100)

在创建完 canvasGradient 对象之后就可以使用 addColorStop 添加颜色了。

canvasGradient.addColorStop(position,color)
addColorStop 方法接受2个参数，position 参数必须是一个0.0 到 1.0 之间数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。 color 参数必须是一个有效的css颜色值。

可以添加任意多个色标，下面是最简单的线性黑白渐变的例子。

let linearGradient = ctx.createLineGradient(0,0,150,150)
linearGradient.addColorStop(0.0,'white')
linearGradient.addColorStop(1,'black')

createLinearGradient 的例子

在例子中设置了两种不同的渐变。设置渐变的步骤是 创建canvasGradient 对象 --> 使用addcolorStop 设置渐变色标 --> 将 canvasGradient 赋值给 fillStyle 或者 strokeStyle --> 使用 fillRect 或者 strokeRect 绘制图形

function draw() {
    let canvas = document.getElementById('tutorial')
    if (canvas.getContext) {
        let ctx = canvas.getContext('2d');

        // Create gradients
        var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
        lingrad.addColorStop(0, '#00ABEB');
        lingrad.addColorStop(0.5, '#fff');
        lingrad.addColorStop(0.5, '#26C000');
        lingrad.addColorStop(1, '#fff');

        var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
        lingrad2.addColorStop(0.5, '#000');
        lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

        // assign gradients to fill and stroke styles
        ctx.fillStyle = lingrad;
        ctx.strokeStyle = lingrad2;

        // draw shapes
        ctx.fillRect(10, 10, 130, 130);
        ctx.strokeRect(50, 50, 50, 50);

    }
}

此处输入图片的描述

createRadialGrdient 的例子

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 创建渐变
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
  radgrad.addColorStop(0, '#A7D30C');
  radgrad.addColorStop(0.9, '#019F62');
  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
  
  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
  radgrad2.addColorStop(0, '#FF5F98');
  radgrad2.addColorStop(0.75, '#FF0188');
  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(0.8, '#00B5E2');
  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
  radgrad4.addColorStop(0, '#F4F201');
  radgrad4.addColorStop(0.8, '#E4C700');
  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
  
  // 画图形
  ctx.fillStyle = radgrad4;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad2;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,150,150);
}

此处输入图片的描述

图案样式 Patterns

createPattern(image,type)
该方法接受两个参数，image 可以是一个 image 对象的引用，或者另一个canvas对象。 type 必须为下列的参数值之一： repeat repeat-x repeat-y no-repeat

图案的应用跟渐变很类似的，创建出一个pattern之后，赋值给 fillStyle 或者 strokeStyle 属性即可。

function draw() {
    let canvas = document.getElementById('tutorial')
    if (canvas.getContext) {
        let ctx = canvas.getContext('2d');

        //创建image对象 用作图案
        var img = new Image();
        img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'
        //使用onload 确保图片已经被加载
        img.onload = function(){
            var ptrn = ctx.createPattern(img,'repeat')
            ctx.fillStyle = ptrn
            ctx.fillRect(0,0,150,150)
        }
    }
}

此处输入图片的描述

阴影 Shadows

shadowOffsetX = float shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的，负值表示阴影会向上或者向左延伸，正值则表示会往下或者右延伸，它们都默认为 0。

shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0 。

shadowColor = color
shadowColor 使用标准的css 颜色值，设定阴影的颜色

文字阴影的例子

function draw() {
    let canvas = document.getElementById('tutorial')
    if (canvas.getContext) {
        let ctx = canvas.getContext('2d');
        //设置阴影
        ctx.shadowOffsetX = 2
        ctx.shadowOffsetY = 2
        ctx.shadowBlur = 5
        ctx.shadowColor = "rgba(0,0,0,0.5)"

        //设置文字
        ctx.font = "20px Times New Roman"      
        ctx.fillStyle = 'black'
        ctx.fillText("Sample String", 5, 30);

    }
}

shadow