网上教学
网络营销培训专家新川教育
   著名实战网络营销课程培训机构.
网络营销,淘宝培训课程优惠
图像的使用《HTML5系列教程21》

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

36选7和31选7混合图:图像的使用《HTML5系列教程21》

福建31选7开奖时间 www.tzh2.cn 在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。谢谢大家的观看。祝大家:身体健康、生活愉快!

      友情链接

  1. 办公文秘
  2. 美术培训
  3. SEM培训
  4. UI设计
  5. PS图片处理
  6. 营销就业班
  7. 跨境电商
  8. 微信营销
  1. 开班信息
  2. 教学优势
  3. 师资介绍
  4. 资料下载
  5. 工作推荐
  6. 学员作品
  7. site map

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

福建31选7开奖时间
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-06-25
  • 海南省习近平新时代中国特色社会主义思想学习研究中心(第二批)招标公告 2019-06-25
  • 网友给包头市委书记留言获回复 共计8条 2019-06-23
  • Jeep推3款车型搭载国VI发动机 新增多项配置 2019-06-21
  • 李易峰观影两度感动落泪 2019-06-21
  • 卓别林回顾展:在他身上,你看到了多少自己的影子? 2019-06-19
  • 从经济数据看民生获得感 2019-06-15
  • 中国智能手机在东南亚受追捧 2019-06-12
  • 房企发债频现中止 行业集中度料提升 ——凤凰网房产北京 2019-06-11
  • 路上安全  警钟长鸣:宝马SUV闯红灯  十字路口被面包车顶翻 2019-06-11
  • 紫光阁中共中央国家机关工作委员会 2019-06-09
  • 为什么截留信马克的帖子?这还有摆事实讲道理存在吗? 2019-06-09
  • 宝宝鼻子不通气怎么办 通气好方法都在这! 2019-06-04
  • 探寻深圳的创新基因(壮阔东方潮 奋进新时代·庆祝改革开放40年) 2019-05-28
  • 遏制互联网恶性竞争,条款是否越细越好 2019-05-28
  • 七星彩走势图2元带坐标 吉林时时彩走势图开奖结果查询 江西快3基本走势图一定牛 香港六合图库大全 号码555出现前后关系 江苏快3总和大小统计 北京pk赛车是正规的吗 广西快乐十分打票软件 福彩中心开机号 2012最新赌具牌九 河北快3一定牛网站 今日大乐透的开奖号码查询结果 淘宝快3吧 鼎盛国际娱乐时时彩 天津11选5彩经网