🏷 canvas 使用图片、像素操作

2021-03-05 | 2024-04-28 | 901 | 4 分钟

使用图片

API

API	描述
drawImage(image, x, y, width, height)	插入图片 · image 图像源是 image 或者 canvas 对象 · x 和 y 是 canvas 里的起始坐标 · width 和 height 这两个参数用来控制向 canvas 画入时应该缩放的大小
createPattern(image, repetition)	在指定的方向内重复指定的元素 · image 图像源是 image 或者 canvas 对象 · repetition：repeat、repeat-x、repeat-y、no-repeat

案例：插入图片

示例代码

HTML

JavaScript

<canvas id="canvas" width="600px" height="250px"></canvas>

window.onload = function () {
    var canvas = document.querySelector("#canvas");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        var img = new Image();
        img.src = "./meimei.jpg";

        img.onload = function () {
            // 如果绘制其他位置需要改变圆心，使用 translate
            ctx.scale(0.2, 0.2);
            ctx.drawImage(img, 0, 0, img.width, img.height);
        }
    }
}

效果展示

案例：设置背景

示例代码

HTML

JavaScript

<canvas id="canvas" width="600px" height="250px"></canvas>

window.onload = function () {
    var canvas = document.querySelector("#canvas");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        var img = new Image();
        img.src = "./meimei.jpg";

        img.onload = function () {
            ctx.fillStyle = ctx.createPattern(img, "no-repeat");
            ctx.scale(0.2, 0.2);
            // 如果绘制其他位置需要改变圆心，使用 translate
            ctx.fillRect(0, 0, img.width, img.height);
        }
    }
}

效果展示

像素操作

API

API	描述
ctx.createImageData(width, height)	创建 ImageData 对象，默认是透明的 rgba(0，0，0，0) · width：ImageData 新对象的宽度 · height：ImageData 新对象的高度
ctx.putImageData(myImageData, dx, dy)	在场景中写入像素数据 · dx：表示绘制的像素数据的设备左上角 x 坐标 · dy：表示绘制的像素数据的设备左上角 y 坐标
ctx.getImageData(sx, sy, sw, sh)	获得一个包含画布场景像素数据的 ImageData 对像，代表了画布区域的对象数据 · sx：将要被提取的图像数据矩形区域的左上角 x 坐标 · sy：将要被提取的图像数据矩形区域的左上角 y 坐标 · sw：将要被提取的图像数据矩形区域的宽度 · sh：将要被提取的图像数据矩形区域的高度

ImageData 对象

width：图片宽度，单位是像素；

height：图片高度，单位是像素；

data：Uint8ClampedArray 类型的一维数组，包含着 RGBA 格式的整型数据，范围在 [0，255] 之间；

R：0 --> 255（黑色到白色）；

G：0 --> 255（黑色到白色）；

B：0 --> 255（黑色到白色）；

A：0 --> 255（透明到不透明）；

获取 ImageData 对象

示例代码

window.onload = function () {
    var canvas = document.querySelector("#test");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgba(241, 223, 12,1)";
        ctx.fillRect(0, 0, 100, 100);

        /*imageData
            width:横向上像素点的个数
            height:纵向上像素点的个数
            data:数组：每一个像素点的rgba信息占 4 个长度
        */

        // 100*100，10000个像素点
        var imageData = ctx.getImageData(0, 0, 100, 100);
        console.log(imageData);

        for (var i = 0; i < imageData.data.length; i++) {
            imageData.data[4 * i + 3] = 100; // 改变每个像素的 透明度
        }

        // 将处理过的 像素 对象 放回到 （0，0）
        ctx.putImageData(imageData, 0, 0);
    }
}

输出展示

创建 ImageData 对象

示例代码

window.onload = function () {
    var canvas = document.querySelector("#test");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        /*imageData
            width:横向上像素点的个数
            height:纵向上像素点的个数
            data:数组：每一个像素点的rgba信息占 4 个长度
        */

        // 100*100，10000个像素点
        var imageData = ctx.createImageData(100, 100);

        for (var i = 0; i < imageData.data.length; i++) {
            imageData.data[4 * i + 3] = 255; // 设置成黑色
        }

        // 将处理过的 像素 对象 放回到 （100，100）
        ctx.putImageData(imageData, 100, 100);
    }
}

输出展示

打赏作者

您的打赏是我前进的动力

微信

支付宝

🏷 canvas 图形转换、渐变、合成

🏷 canvas 导出、事件

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 使用图片
2. 像素操作