Canvas绘制简单图片教程

2019-09-08 郑州网站建设  

获取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复制内容到剪贴板

var canvas=document.getElementById('myCanvas');   

    var context=canvas.getContext("2d");   

    //绘制图片   

    var img=new Image();   

    img.src="1.jpg";   

    img.onload=function(){   

       //context.drawImage(img,0,0);    

       //context.drawImage(img,0,0,100,100);    

       context.drawImage(img,180,160,100,100,0,0,100,100);   

       var imagedata=context.getImageData(0,0,100,100);   

       for (var i = 0, n = imagedata.data.length; i < n; i += 4) {   

            imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;   

            imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green   

            imagedata.data[i + 2] = 255 - imagedata.data[i + 2];    

        }   

       context.putImageData(imagedata,0,0);   

    }  


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1361.html转载请标明出处,谢谢合作!
标签:
  • 出来
  • 对象
  • Canvas
  • 获取
  • Image
  • new