HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

2019-01-28 15:27:48丽君
  •      context.fillStyle = '#ff0000';         context.arc(50,50,30,0, 2 * Math.PI);   
  •      context.fill();            
  •      // 颜色翻转         var img = new Image();   
  •                 img.src = 'images/1.jpg';   
  •      img.onload = function(){             context.drawImage(img, 0,0, 1, 1);   
  •          var imgData = context.getImageData(0,0, 1,1);             var pixels = imgData.data;   
  •          console.log(pixels);             for(var i = 0, n = pixels.length; i < n; i+=4) {   
  •              pixels[i] = 255 - pixels[i];                 pixels[i+1] = 255 - pixels[i + 1];   
  •              pixels[i+2] = 255 - pixels[i + 2];             }   
  •          context.putImageData(imgData, 250, 0);         }   
  • }