当前位置：网站首页>canvas图片操作

canvas图片操作

2022-08-11 09:02:00 【好奇的菜鸟】

一、drawImage()绘制

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
<div><img src="../img/demo.png" alt=""></img></div>
<div>
    <canvas id="myCanvas" width="400" height="400">你的浏览器不支持HTML5</canvas>
</div>
</body>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var image = new Image();
    image.src = "../img/demo.png";
    image.onload = function () {
        //以(10,10)为顶点，绘制图像
        ctx.drawImage(image, 10, 10);
        //以(110,10)为顶点，绘制宽度110，高度为110图像
        ctx.drawImage(image, 110, 10, 110, 110);
        //图片从（10,10）剪切宽度50，高度50，显示到（210,10） 宽度150，高度150
        ctx.drawImage(image, 10, 10, 50, 50, 210, 10, 150, 150);

    }
</script>
</html>

 //以(10,10)为顶点，绘制图像
 ctx.drawImage(image, 10, 10);

//以(110,10)为顶点，绘制宽度110，高度为110图像
ctx.drawImage(image, 110, 10, 110, 110);

  //图片从（10,10）剪切宽度50，高度50，显示到（210,10） 宽度150，高度150
 ctx.drawImage(image, 10, 10, 50, 50, 210, 10, 150, 150);

二、getImageData()与putImageData()绘制图片

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
<div><img src="../img/demo.png" alt=""></img></div>
<div>
    <canvas id="myCanvas" width="600" height="600">你的浏览器不支持HTML5</canvas>
</div>
</body>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var image = new Image();
    image.src = "../img/demo.png";
    image.onload = function () {
        //以(10,10)为顶点，绘制图像
        ctx.drawImage(image, 10, 10);
        //开始复制位置（20,20）,复制宽度100，复制高度100
        var imgData = ctx.getImageData(20, 20, 100, 100);
        //将复制图像显示至（300,20）位置
        ctx.putImageData(imgData, 300, 20);
        //在（400,20）位置显示，图像（20,20）宽度50，高度50
        ctx.putImageData(imgData, 400, 20, 20, 20, 50, 50)
    }
</script>
</html>

三、createImageData()新建像素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
<div><img src="../img/demo.png" alt=""></img></div>
<div>
    <canvas id="myCanvas" width="600" height="600">你的浏览器不支持HTML5</canvas>
</div>
</body>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var image = new Image();
    image.src = "../img/demo.png";
    image.onload = function () {
        //以(10,10)为顶点，绘制图像
        ctx.drawImage(image, 10, 10);
        //开始复制位置（20,20）,复制宽度100，复制高度100
        var imgData = ctx.getImageData(20, 20, 100, 100);
        //创建空白imageData,宽度和高度使用imgData的宽度和高度(100,100)
        var imageData01 = ctx.createImageData(imgData);
        //填充imageData颜色和透明度grba
        for (var i = 0; i < imageData01.width * imageData01.height * 4; i += 4) {
            imageData01.data[i + 0] = 255;
            imageData01.data[i + 1] = 0;
            imageData01.data[i + 2] = 0;
            imageData01.data[i + 3] = 255;
        }
        //将复制图像显示至（10, 300）位置
        ctx.putImageData(imageData01, 10, 300);
        //创建空白imageData
        var imageData02 = ctx.createImageData(100,100);
        for (var i = 0; i < imageData02.width * imageData02.height * 4; i += 4) {
            imageData02.data[i + 0] = 255;
            imageData02.data[i + 1] = 0;
            imageData02.data[i + 2] = 0;
            imageData02.data[i + 3] = 155;
        }
        //将复制图像显示至（120, 300）位置
        ctx.putImageData(imageData02, 120, 300);
    }
</script>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
<div><img src="../img/demo.png" alt=""></img></div>
<div>
    <canvas id="myCanvas" width="600" height="600">你的浏览器不支持HTML5</canvas>
</div>
</body>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var image = new Image();
    image.src = "../img/demo.png";
    image.onload = function () {
        //以(10,10)为顶点，绘制图像
        ctx.drawImage(image, 10, 10);
        //开始复制位置（20,20）,复制宽度100，复制高度100
        var imgData = ctx.getImageData(20, 20, 100, 100);
        //创建空白imageData,宽度和高度使用imgData的宽度和高度(100,100)
        var imageData01 = ctx.createImageData(imgData);
        //填充imageData颜色和透明度grba
        for (var i = 0; i < imageData01.width * imageData01.height * 4; i += 4) {
            imageData01.data[i + 0] = random(0,255);
            imageData01.data[i + 1] = random(0,125);
            imageData01.data[i + 2] = random(125,255);
            imageData01.data[i + 3] = random(0,255);
        }
        //将复制图像显示至（10, 300）位置
        ctx.putImageData(imageData01, 10, 300);
        //创建空白imageData
        var imageData02 = ctx.createImageData(100,100);
        for (var i = 0; i < imageData02.width * imageData02.height * 4; i += 4) {
            imageData02.data[i + 0] = random(0,255);
            imageData02.data[i + 1] = random(125,255);
            imageData02.data[i + 2] = random(0,125);
            imageData02.data[i + 3] = random(0,255);
        }
        //将复制图像显示至（120, 300）位置
        ctx.putImageData(imageData02, 120, 300);
    }
    function random(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }
</script>
</html>