网页上怎么使用代码编辑图像

作者：简简单单 2017-06-20

提示：您可以先修改部分代码再运行

<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">思路：我们在用代码实现不同的图像效果就要做到如下的几件事情。首先，一个图像作为网页元素的声明让普通图像呈现出来。其次，声明一个画布的样式，声明一个图像的变量，从而让图像在画布上呈现出来。<a href="https://img.111com.net/get_pic/php/upload/image/20170620/1497929546545124.jpg" class="js-smartPhoto" target="_blank"><img alt="如何在网页上用代码编辑图像" src="https://img.111com.net/get_pic/php/upload/image/20170620/1497929546545124.jpg" data-ke-src="https://img.111com.net/get_pic/2017/06/20/20170620113037889.jpg" style="border: 0px;"/></a><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">给出普通图像的代码。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:=""> 普通图像<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:=""><a href="***" alt="The baidu" class="js-smartPhoto" target="_blank"><img id="baidu" src="***" alt="The baidu"/></a><a href="https://img.111com.net/get_pic/php/upload/image/20170620/1497929546873916.jpg" class="js-smartPhoto" target="_blank"><img alt="如何在网页上用代码编辑图像" src="https://img.111com.net/get_pic/php/upload/image/20170620/1497929546873916.jpg" data-ke-src="https://img.111com.net/get_pic/2017/06/20/20170620113039680.jpg" style="border: 0px;"/></a><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">给出画布图像的样式。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:=""> 画布图像<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:=""><canvas id="画布" style="border:2px solid #458B00;background:#EE9A00;"></canvas><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:=""> <a href="https://img.111com.net/get_pic/php/upload/image/20170620/1497929546862524.jpg" class="js-smartPhoto" target="_blank"><img alt="如何在网页上用代码编辑图像" src="https://img.111com.net/get_pic/php/upload/image/20170620/1497929546862524.jpg" data-ke-src="https://img.111com.net/get_pic/2017/06/20/20170620113041655.jpg" style="border: 0px;"/></a><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">把画布上的图像定义为变量，并进行一个绘制。这里使用了代码ctx.drawImage(）<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:=""> <script><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">var c=document.getElementById("画布");<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">var ctx=c.getContext("2d");<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">var img=document.getElementById("baidu");<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-">ctx.drawImage(img,100,100);<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-"></script> <a href="https://img.111com.net/get_pic/php/upload/image/20170620/1497929547191196.jpg" class="js-smartPhoto" target="_blank"><img alt="如何在网页上用代码编辑图像" src="https://img.111com.net/get_pic/php/upload/image/20170620/1497929547191196.jpg" data-ke-src="https://img.111com.net/get_pic/2017/06/20/20170620113044777.jpg" style="border: 0px;"/></a><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">规定固定高度与宽度的图像效果。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">ctx.drawImage(img,10,10,200,100);<a href="https://img.111com.net/get_pic/php/upload/image/20170620/1497929547797683.jpg" class="js-smartPhoto" target="_blank"><img alt="如何在网页上用代码编辑图像" src="https://img.111com.net/get_pic/php/upload/image/20170620/1497929547797683.jpg" data-ke-src="https://img.111com.net/get_pic/2017/06/20/20170620113046844.jpg" style="border: 0px;"/></a><p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">对于图像进行了精确的剪切与定位。<p style="word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: " sans="" font-size:="" font-style:="" font-variant-ligatures:="" font-variant-caps:="" font-weight:="" letter-spacing:="" orphans:="" text-align:="" text-indent:="" text-transform:="" white-space:="" widows:="" word-spacing:="" -webkit-text-stroke-width:="">ctx.drawImage(img,10,10,100,100,20,20,190,180);<a href="https://img.111com.net/get_pic/php/upload/image/20170620/1497929547492465.jpg" class="js-smartPhoto" target="_blank"><img alt="如何在网页上用代码编辑图像" src="https://img.111com.net/get_pic/php/upload/image/20170620/1497929547492465.jpg" data-ke-src="https://img.111com.net/get_pic/2017/06/20/20170620113048747.jpg" style="border: 0px;"/></a>原文链接：http://jingyan.baidu.com/article/d7130635ca3a6613fdf475a4.html

提示：您可以先修改部分代码再运行

网页上怎么使用代码编辑图像

相关文章

精彩推荐