您的位置：首页 > 其它

canvas加载图片·绘制像素图·旋转平移缩放图片

2017-07-20 17:35 627 查看 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas高级功能实现</title>
</head>
<body>
<canvas id="canvas1" width="1000" height="1000"></canvas>

</body>
<script>

/*显示图像*/
var k=document.getElementById("canvas1");
var kellen=k.getContext("2d");
var disk=new Image();
disk.src="../img/zhuanpan.png";
disk.onload=function(){
kellen.drawImage(disk,300,100,400,400);
}
/*创建像素对象*/
var imagData=kellen.createImageData(200,200);
for(var i=0;i<200*200*4;i+=4)
{
imagData.data[i]=0;
imagData.data[i+1]=0;
imagData.data[i+2]=255;
imagData.data[i+3]=255;
}
kellen.putImageData(imagData,0,0);
/*把图片反色*/

for(var i=0;i<200*200*4;i+=4)
{
imagData.data[i]=255-imagData.data[i];
imagData.data[i+1]=255-imagData.data[i+1];
imagData.data[i+2]=255-imagData.data[i+2];

}
kellen.putImageData(imagData,0,200);
/*平移旋转缩放*/

kellen.strokeRect(200,0,50,50);
kellen.save();
kellen.translate(50,0);
kellen.strokeRect(200,0,50,50);
kellen.translate(-50,0);
kellen.restore();

kellen.save();
kellen.translate(50,0);//平移画布
kellen.rotate(45*Math.PI/180);//旋转画布
kellen.strokeRect(200,0,50,50);
kellen.rotate(-45*Math.PI/180);
kellen.translate(-50,0);
kellen.restore();

/*缩放的就不写了，没意思了这个*/
/*平移旋转这些主要是靠移动画布来实现，感觉很麻烦。。。但是大家都这么干，希望以后可以推出方面的函数*/
/*新图绘制默认会覆盖旧图，否则用canvas.globalCompositeOperation值来调节.

</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  canvas 图片
相关文章推荐
新的分享
章节导航