如何在网页上用代码编辑图像

1、思路：我们在用代码实现不同的图像效果就要做到如下的几件事情。首先，一个图像作为网页元素的声明让普通图像呈现出来。其次，声明一个画布的样式，声明一个图像的变量，从而让图像在画布上呈现出来。

2、给出普通图像的代码。

普通图像

<img id="baidu" src="***" alt="The baidu" />

3、给出画布图像的样式。

画布图像

<canvas id="画布

</canvas>

4、把画布上的图像定义为变量，并进行一个绘制。这里使用了代码ctx.drawImage(）

<script>

var c=document.getElementById("画布");

var ctx=c.getContext("2d");

var img=document.getElementById("baidu");

ctx.drawImage(img,100,100);

</script>

5、规定固定高度与宽度的图像效果。

ctx.drawImage(img,10,10,200,100);

6、对于图像进行了精确的剪切与定位。

ctx.drawImage(img,10,10,100,100,20,20,190,180);