课程免费试听
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
图像的使用《HTML5系列教程21》

来源:新川教育 阅读数:3042
添加时间:2017-5-4   类别:网页设计教程

图像的使用《HTML5系列教程21》

在HTML5中使用图像的方法

    我们在做网页的时候往往要运用图片来进行点缀,无论是logo或是产品图像,都会给人耳目一新的感觉。那么在HTML5中,使用Canvas就可以直接插入图像,甚至可以对插入的图像进行平铺和裁剪等操作,接下来就让我们来了解一下在Canvas中图像的使用方式吧!


1.图像的插入

    在HTML中可以使用img标签插入一个图像,而在HTML5中,我们就可以使用Canvas的drawlmage函数直接在指定位置插入图像。插入图像的代码如图所示:

在HTML5中插入图像的代码方式

    在谷歌浏览器中的预览效果如图:

在HTML5中插入图像的方式预览


2.图像的平铺

    在绘制平铺图像时,我们需要用到Canvas的createPattern函数,该函数有两个参数,第一个参数是需要平铺的图像,第二好参数确定以哪种方式进行平铺,可用的选项包括repent(在水平和垂直方向重复),repeat-x(在水平方向重复),repeat-y(在垂直方向重复),no-repeat(不重复),绘制水平和垂直方向重复的代码如图所示:

在HTML5中平铺图像的代码方式

    在谷歌浏览器中的预览效果如图:

在HTML5中平铺图像的方式预览


3.图像的裁剪

    Canvas允许用户在绘制图像时对绘制的图形进行裁剪操作,这时候需要用到绘图形函数,该函数有多个重载方法,这些方法分别如下图所示:

绘制图像函数的多个重载方法

    该表对上述三个函数进行参数说明

绘制图像函数的参数说明

    使用Canvas裁剪图像的代码如下图所示:

在HTML5中进行裁剪图像的代码示例

    在谷歌浏览器中的预览效果如图:

在HTML5中进行裁剪图像在浏览器中预览示例


4.反转图像颜色

    大家都知道图像是由一个一个的像素点组成的,根据各像素点颜色分配的不同,呈现出不同的图像。Canvas提供了修改像素点颜色的方法,用于度图像进行各种操作。通过修改像素反转图像颜色的代码如下图所示:

在HTML5中利用Canvas反转图像颜色代码

    在谷歌浏览器中的预览效果如图:

在HTML5中利用Canvas反转图像颜色在浏览器中预览效果


    好了,关于图像的使用方法我们就介绍到这里了。关注更多精彩内容和丰富资讯请关注我们的官方微信:pyyuanxing。谢谢大家的观看。祝大家:身体健康、生活愉快!

庆圣诞、迎元旦学费大优惠活动!    限30名! 报名从速。

      友情链接

  1. 办公文秘
  2. 美术培训
  3. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 学校图片
  7. 联系方式
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   
电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息 
咨询微信:18926224142   微信公众号:新川教育
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6