canvas基础3

一、绘制图像

// 2d 绘图上下文内置支持操作图像。

// 如果想把现有图像绘制到画布上，可以使用 drawImage() 方法。

// context.drawImage(图像, x坐标, y坐标);
context.drawImage(image, 10, 10);

// context.drawImage(图像, x坐标, y坐标, 图像宽度, 图像高度);
context.drawImage(image, 50, 10, 20, 30);

// context.drawImage(图像, 源图像x坐标, 源图像y坐标, 源图像宽度, 源图像高度, 目标区域x坐标, 目标区域y坐标, 目标区域宽度, 目标区域高度);
context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);

二、阴影

// 2d 上下文可以根据以下属性的值自动为已有形状或路径生成阴影。

// shadowColor: CSS颜色值，表示要绘制的阴影颜色，默认为黑色。

// shadowOffsetX: 阴影相对于形状或路径的 x 坐标的偏移量，默认为0。

// shadowOffsetY: 阴影相对于形状或路径的 Y 坐标的偏移量，默认为0。

// shadowBlur: 像素，表示阴影模糊量。默认值为 0，表示不模糊。



let context = drawing.getContext("2d");
// 设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur  = 4;
context.shadowColor   = "rgba(0, 0, 0, 0.5)";      
// 画一个红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 画一个蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);


// 浏览器输出如下

三、渐变

// 渐变通过 CanvasGradient的实例表示，在 2d 上下文中创建和修改都非常简单。

// 要创建一个新的线性渐变，可以调用上下文的 createLinearGradient() 方法。

// 这个方法接收 4 个参数：起点 x 坐标、起点 y 坐标、终点 x 坐标和终点 y 坐标。


let gradient = context.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");

// 画一个红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);


// 浏览器输出如下

// 以上代码执行之后绘制的矩形只有左上角有一部分白色。

// 代码改进如下：

function createRectLinearGradient(context, x, y, width, height) {
  return context.createLinearGradient(x, y, x+width, y+height);
}

let gradient = createRectLinearGradient(context, 30, 30, 50, 50);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
// 绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);


// 浏览器输出如下

// 径向渐变（或放射性渐变）要使用 createRadialGradient() 方法来创建。

// 这个方法接收6个参数，分别对应两个圆形圆心的坐标和半径。


let gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
// 画一个红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);



// 浏览器输出如下