【HTML5】Canvas绘图简易照片实例教程

日期:2020-12-11 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

获得Image目标,new出来

界定Image目标的src特性,主要参数:照片相对路径

界定Image目标的onload方式,启用context目标的drawImage()方式,主要参数:Image目标,x座标,y座标

 

重载方式,启用context目标的drawImage()方式,主要参数:Image目标,x座标,y座标,图象宽度,高宽比

 

 

重载方式,启用context目标的drawImage()方式,

主要参数:

Image目标,图象上x座标,图象上y座标,矩形框宽度,矩形框高宽比,画在画布上的x座标,画在画布上的y座标,图象宽度,图象高宽比

 

启用context目标的getImageData()方式,获得像素色调数字能量数组,主要参数:x座标,y座标,x宽度,y宽度

启用context目标的putImageData ()方式,设定照片色调,主要参数:ImageData目标,x座标,y座标

 

JavaScript Code拷贝內容到剪贴板
  1. var canvas=document.getElementById('myCanvas');   
  2.     var context=canvas.getContext("2d");   
  3.     //绘图照片   
  4.     var img=new Image();   
  5.     img.src="1.jpg";   
  6.     img.onload=function(){   
  7.        //context.drawImage(img,0,0);    
  8.        //context.drawImage(img,0,0,100,100);    
  9.        context.drawImage(img,180,160,100,100,0,0,100,100);   
  10.        var imagedata=context.getImageData(0,0,100,100);   
  11.        for (var i = 0, n = imagedata.data.length; i < n; i += 4) {   
  12.             imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;   
  13.             imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green   
  14.             imagedata.data[i + 2] = 255 - imagedata.data[i + 2];    
  15.         }   
  16.        context.putImageData(imagedata,0,0);   
  17.     }  

以上这篇【HTML5】Canvas绘图简易照片实例教程便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。