canvas 画图的方式

html 代码

<canvas id="canvas_data_method" width="500" height="500" style=" border: 1px solid #c03;"></canvas>
            <canvas id="canvas_img_method" width="500" height="500" style=" border: 1px solid #06C1AE;"></canvas>
            <!-- <canvas id="canvas" width="500" height="300" style=" border: 1px solid #1122c0;"></canvas> -->
            <!-- <script src="./image.js"> -->
            <!-- </script> -->
            <script src="index.js"></script>

JS代码

var canvasa = document.getElementById('canvas_data_method');
var ctxa = canvasa.getContext('2d');

var canvasb = document.getElementById('canvas_img_method');
var ctxb = canvasb.getContext('2d');

var imageData;
var image = new Image()
image.src = 'girl.jpg'
image.onload = function () {
    ctxb.drawImage(this, 0, 0, this.width, this.height)
    imageData = ctxb.getImageData(0, 0, canvasb.width, canvasb.height)
    console.log(imageData.data);
    var cImage = ctxa.createImageData(canvasa.width, canvasa.height)
    
    
    
    
    
    
    
    // 使用Uint8ClampedArray格式展示图片
    for (var i = 0; i < imageData.data.length; i ++) {  //随便改变一下RGB值
            cImage.data[i + 0] = imageData.data[i + 0] + 50
            cImage.data[i + 1] = imageData.data[i + 1] + 70
            cImage.data[i + 2] = imageData.data[i + 2] 
            cImage.data[i + 3] = imageData.data[i + 3] 
        }
    console.log(cImage.data[0]);
    ctxa.putImageData(cImage, 0, 0, 0, 0, canvasa.width, canvasa.height)
}