canvas---像素与图像基本操作

最新推荐文章于 2024-01-15 01:00:00 发布

maidu_xbd

最新推荐文章于 2024-01-15 01:00:00 发布

阅读量381

点赞数

分类专栏： HTML 文章标签： createImageData drawImage

本文链接：https://blog.csdn.net/maidu_xbd/article/details/90476201

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

像素操作

像素操作

ctx.createImageData(width,height)

以指定的尺寸（以像素计）创建新的 ImageData 对象

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)

G - 绿色 (0-255)

B - 蓝色 (0-255)

A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

context.getImageData(x,y,width,height);

返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据

使用 putImageData() 方法将图像数据拷贝回画布上。

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirty

Height);

把图像数据（从指定的 ImageData 对象）放回画布上

imgData.data

返回一个对象，其包含指定的 ImageData 对象的图像数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>像素</title>

    <script>
        window.onload = function () {
            var cv = document.getElementById("cv");
            var ctx = cv.getContext('2d');
            var imgData = ctx.createImageData(200, 200);
            // 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
            alert(imgData.data.length);//imgData.data.length=像素个数*4
            for (var i = 0; i < imgData.data.length; i += 4) {
                imgData.data[i + 0] = 255;//R - 红色 (0-255)
                imgData.data[i + 1] = 0;//G - 绿色 (0-255)
                imgData.data[i + 2] = 255;//B - 蓝色 (0-255)
                imgData.data[i + 3] = 255;// A - alpha 通道(0-255; 0 是透明的，255 是完全可见的)
            }
            ctx.putImageData(imgData, 10, 10);

        }
    </script>
</head>

<body>
    <canvas id="cv" width="400px" height="400px" style="border:1px solid #333;">
        不支持canvas的浏览器
    </canvas>
</body>

</html>

图像操作

图像绘制

ctx.drawImage(img,x,y);

在画布上绘制图像、画布或视频,左上角的 x 坐标，左上角的 y 坐标,

ctx.drawImage(img,x,y,width,height);

在画布上定位图像，并规定图像的宽度和高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像</title>

    <script>
        window.onload = function () {
            var cv = document.getElementById("cv");
            var ctx = cv.getContext('2d');
            var yImg = new Image();
            // 图片预加载：在onload中调用方法
            yImg.onload = function () {
                draw(this);
            };
            yImg.src = "1.jpg";
            function draw(obj) {
                ctx.drawImage(obj, 0, 0);
            }
        }
    </script>
</head>

<body>
    <canvas id="cv" width="400px" height="400px" style="border:1px solid #333;">
        不支持canvas的浏览器
    </canvas>
</body>

</html>

maidu_xbd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas---像素与图像基本操作

像素操作像素操作 ctx.createImageData(width,height) 以指定的尺寸（以像素计）创建新的 ImageData 对象对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值： R - 红色 (0-255) G - 绿色 (0-255) ...
复制链接

扫一扫

专栏目录