html canvas 绘图,canvas 绘制图片

　　获取图像对象，new out。

　　定义图像对象的src属性，参数：图像路径

　　定义Image对象的onload方法，调用context对象的drawImage()方法。参数：图像对象，x坐标，y坐标。

　　重载方法以调用上下文对象的drawImage()方法。参数：图像对象，x坐标，y坐标，图像宽度和高度。

　　重载方法，调用上下文对象的drawImage()方法，

　　参数：

　　图像，图像上的x坐标，图像上的y坐标，矩形的宽度和高度，画布上的x坐标，画布上的y坐标，图像的宽度和高度。

　　调用context对象的getImageData()方法获取像素颜色数组，参数：x坐标，y坐标，x宽度，y宽度。

　　调用context对象的putImageData()方法设置图片的颜色。参数：ImageData对象，x坐标，y坐标。

　　代码将内容复制到剪贴板var canvas=document . getelementbyid( my canvas )；var context=canvas . get context( 2d )；//绘制图片varimg=new image()；img . src= 1 . jpg ；img . onload=function(){//context . draw image(img，0，0)；//context.drawImage(img，0，0，100，100)；context.drawImage(img，180，160，100，100，0，0，100，100)；varimagedata=context . getimagedata(0，0，100，100)；for(vari=0，n=imagedata . data . length；在；I=4){ imagedata . data[I 0]=255-imagedata . data[I 0]；//红色；imagedata . data[I 1]=255-imagedata . data[I 1]；//绿色imagedata . data[I 2]=255-imagedata . data[I 2]；} context . putimagedata(imagedata，0，0)；}以上【HTML5】画布绘制简单图片教程就是边肖分享的全部内容。希望能给你一个参考和支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。