正文
HTML5 canvas图像绘制方法与像素操作属性和方法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
图像绘制方法
drawImage() 向画布上绘制图像、画布或视频
像素操作属性和方法
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上
<canvas id="g" width="880" height="450" style="border:1px solid #000"></canvas>
<img src="data:images/eg_tulip.jpg" id="img">
<script type="text/javascript">
var a=document.getElementById("g");
var ctx=a.getContext("2d"); var img=document.getElementById("img");
ctx.drawImage(img,0,0); //向画布上绘制图像、画布或视频
var imgData=ctx.getImageData(0,0,c.width,c.height); //返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
// 反转颜色
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];//返回一个对象，其包含指定的 ImageData 对象的图像数据
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);//把图像数据（从指定的 ImageData 对象）放回画布上 var imgData=ctx.createImageData(100,100);//创建新的、空白的 ImageData 对象
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=0;
imgData.data[i+1]=255;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,10,150); var imgDa=ctx.getImageData(10,150,100,100);
ctx.putImageData(imgDa,10,300);
</script>
