Canvas绘图(三)

本章将介绍canvas的以下技巧

填充
创建阴影
画布层面操作

一、填充

本章介绍形状的着色与填充，除此之外，还有渐变

context.fillStyle该属性用于设置画布上形状的基本颜色和填充。该属性支持以下几种方式设置颜色

rgb : context.fillStyle = 'rgb(255,0,0)'
十六进制数字字符串 : context.fillStyle = '#66ccff'
rgba : context.fillStyle = 'rgba(255,0,0,1)'

A. 线性渐变

线性渐变有3中基本样式 :水平、垂直、对角线

接口	说明
context.createLinearGradient(x1,y1,x2,y2)	(x1,y1)和(x2,y2)分别为渐变开始、结束坐标

a. 线性水平渐变

通过沿对象设置的颜色断带你来控制渐变颜色，当渐变位置为左上角和右上角时(即y 相同时)，就能设置一个水平的渐变，例如 :

drawLinearGradient() {
    // 水平渐变的值必须保持为0
    const gr = this.context.createLinearGradient(100, 100, 200, 100);
    // 添加颜色断点
    gr.addColorStop(0, "rgb(255,0,0)");
    gr.addColorStop(0.5, "rgb(0,255,0)");
    gr.addColorStop(1, "rgb(255,0,0)");
    this.context.fillStyle = gr;
    this.context.fillRect(100, 100, 100, 100);
}

image-20200927173141467.png

还可以将改渐变应用到复杂图形上

drawGradientToComplexShape() {
    const gr = this.context.createLinearGradient(100, 100, 200, 100);
    gr.addColorStop(0, "rgb(255,0,0)");
    gr.addColorStop(0.5, "rgb(0,255,0)");
    gr.addColorStop(1, "rgb(255,0,0)");
    this.context.fillStyle = gr;
    this.context.beginPath();
    this.context.moveTo(100, 100);
    this.context.lineTo(150, 100);
    this.context.lineTo(200, 150);
    this.context.lineTo(150, 200);
    this.context.lineTo(100, 200);
    this.context.lineTo(100, 100);
    this.context.stroke();
    this.context.fill();
    this.context.closePath();
}

image-20200928091944354.png

b. 垂直渐变

垂直渐变的创建方式与水平渐变一样，不同的是，垂直渐变要求x相同，例如

drawGradientToComplexShape() {
    const gr = this.context.createLinearGradient(100, 100, 100, 200);
    gr.addColorStop(0, "rgb(255,0,0)");
    gr.addColorStop(0.5, "rgb(0,255,0)");
    gr.addColorStop(1, "rgb(255,0,0)");
    this.context.fillStyle = gr;
    this.context.beginPath();
    this.context.moveTo(100, 100);
    this.context.lineTo(150, 100);
    this.context.lineTo(200, 150);
    this.context.lineTo(150, 200);
    this.context.lineTo(100, 200);
    this.context.lineTo(100, 100);
    this.context.stroke();
    this.context.fill();
    this.context.closePath();
}

image-20200928092338440.png

另外，我们还可以将垂直渐变应用在描边上

drawGradientToBorder() {
    const gr = this.context.createLinearGradient(100, 100, 100, 200);
    gr.addColorStop(0, "rgb(255,0,0)");
    gr.addColorStop(0.5, "rgb(0,255,0)");
    gr.addColorStop(1, "rgb(255,0,0)");
    this.context.strokeStyle = gr;
    this.context.beginPath();
    this.context.moveTo(100, 100);
    this.context.lineTo(150, 100);
    this.context.lineTo(200, 150);
    this.context.lineTo(150, 200);
    this.context.lineTo(100, 200);
    this.context.stroke();
    this.context.closePath();
}

image-20200928092749924.png

c. 对角线渐变

同理，我们可以轻易的创建对角线的渐变，只要令渐变开始与渐变结束的坐标为右上角和左下角就可以了。

drawGradientDiagonal() {
    const gr = this.context.createLinearGradient(100, 100, 200, 200);
    gr.addColorStop(0, "rgb(255,0,0)");
    gr.addColorStop(0.5, "rgb(0,255,0)");
    gr.addColorStop(1, "rgb(255,0,0)");
    this.context.fillStyle = gr;
    this.context.fillRect(100,100,100,100) 
}

image-20200928093631778.png

B. 径向渐变

径向渐变的定义过程和线性渐变非常类似，他需要6个参数设置，而线性渐变仅仅需要4个，它同样采用颜色断点来创建颜色变化

接口	说明
context.createRadiaGradient(x1,y1,r1,x2,y2,r2)	分别定义圆心与半径，分为两个点，第一个圆是开始圆，第二个圆是结束圆

例如画一个简单的径向渐变

drawRadialGradient() { 
    const gr = this.context.createRadialGradient(150, 150,25, 150, 150,100);
    gr.addColorStop(0, "rgb(255,0,0)");
    gr.addColorStop(0.5, "rgb(0,255,0)");
    gr.addColorStop(1, "rgb(255,0,0)");
    this.context.fillStyle = gr;
    this.context.fillRect(100,100,100,100) 
}

image-20200928095933623.png

写一个复杂的线性渐变

drawRadialGradient() {
    const gr = this.context.createRadialGradient(125, 125, 10, 150, 150, 50);
    gr.addColorStop(0, "rgb(255,0,0)");
    gr.addColorStop(0.5, "rgb(0,255,0)");
    gr.addColorStop(1, "rgb(255,0,0)");
    this.context.fillStyle = gr;
    this.context.arc(150, 150 , 50, 0, (Math.PI / 180) * 360, false);
    this.context.fill()
}

image-20200928100323178.png

C. 用图案填充形

接口	说明
createPattern(image,mode)	填充图案初始化，它有两个参数，第一个是Image对象实例；第二个是String类型，表示在形状中如何显示repeat

有以下几种填充类型 :

repeat
repeat-x
repeat-y
no-repeat

现代浏览器对这4中类型的支持度不同，不过，普遍都能支持标准的repeat类型。

例如，填充以下图案 :

drawFillImage() {
    const fillImage = new Image();
    fillImage.onload = () => {
    const fillPattern = this.context.createPattern(fillImage, "repeat");
    this.context.fillStyle = fillPattern;
    this.context.fillRect(0, 0, 400, 400);
    };
    fillImage.src = helloworld;
}

image-20200928111941561.png

二、创建阴影

可以通过以下几个属性为对象添加阴影

属性名	说明
shadowOffsetX	x偏移值
shadowOffsetY	y偏移值
shadowColor	阴影颜色
shadowBlur	阴影模糊效果的程度，即模糊级数

例如 :

drawShadow() {
    this.context.fillStyle = "red";
    this.context.shadowOffsetX = 4;
    this.context.shadowOffsetY = 4;
    this.context.shadowColor = "black";
    this.context.shadowBlur = 10
    this.context.fillRect(10, 10, 100, 100);
}

image-20200928142311184.png

三、画布层面操作

A. 简单填充

使用一个新的背景色简单的填充整个画布

drawAllCanvas() { 
    this.context.fillStyle = '#66ccff'
    this.context.fillRect(0,0,this.theCanvas.width,this.theCanvas.height)
}

B. 重置画布的宽和高

当画布的宽或者高被重置时，当前画布的内容就会被移除

clearRect() {
    const w = this.theCanvas.width;
    const h = this.theCanvas.height;
    this.theCanvas.width = w;
    this.theCanvas.width = h;
}

C. 检查一个点是否在当前路径中

可以使用isPointInPath检查一个点是否在当前路径

isInThePath() {
    this.context.strokeStyle = "red";
    this.context.lineWidth = 5;
    this.context.moveTo(0, 0);
    this.context.lineTo(50, 0);
    this.context.lineTo(50, 50);
    this.context.stroke();
    console.log(this.context.isPointInPath(50, 1));
    this.context.closePath();
}

四、Canvas基本绘图