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);
// 浏览器输出如下