广东 广州     国内第一流的专业网络营销培训、淘宝电商培训、电脑设计培训教程中心
网络营销选择培训班
新川教育-专业的网络营销培训机构
图像的使用《HTML5系列教程21》-广州番禺新川教育(原远行教育)。
   图像的使用《HTML5系列教程21》

来源:广州新川(原远行教育) 阅读数:831
添加时间: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。谢谢大家的观看。祝大家:身体健康、生活愉快!

客服中心

点击这里给我发消息
黎老师

扫描添加微信号

广州新川教育微信号

展开客服

      友情链接

学校简介 |  教学优势   |   开班信息     |   学员作品  |   学校图片  |  师资介绍 |   资料下载   
工作推荐  |   就业精英   |  平面设计  |   室内设计  |  办公文秘 |   办公文秘教程 | 美术培训  | site map
地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话:020-84829690 84824066 咨询QQ:522961923  点击这里给我发消息
(4,5,6B,8,10,12,13,160,147路公共汽车在番禺中医院站或百德商业中心站下车即到)
(3,11,18,22,22B,51B,92,96,97,99,100,102,105,141,148,149,150,150B,303,309,310路公共汽车在交通大厦站下车,向番禺中医院方向走大约200米即到。)
1,20,20B,9路公共汽车到市桥大桥北站下车,向番禺中医院方向走100米左右即到。)
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6

 新浪微博     新浪博客   天涯博客    和讯博客