html5进阶之canvas图像基础
2017-11-29 15:33
323 查看
1、首先还是使用之前讲过的Image()函数来预加载图像。
在调用图像之前,需创建一个事件监听器,为其保证图像已经正确的加载。
如下图:
监听图片已经正确加载
2、把图像显示在画布上面,这里将不再使用createPattern(),改而使用drawImage()函数来实现
提示:createPattern()用在图像填充,而drawImage()是直接加载图像。两者有明显的区别,不要混淆了哦!
drawImage()中包含9个参数,第一个参数:Image对象,也就是图片。第二个和第三个参数定义画布上图像左上角的起始点。第四个和第五个参数定义图像的大小。第六个和第七个参数表示复制图像后的目标位置。第八个和第九个参数定义被复制的图形的大小。
具体用法如下:
图片加载代码
图片加载预览效果
web前端/H5/javascript学习群:250777811
欢迎大家关注我的微信号公众号,公众号名称:web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧(长按下面的二维码图片、并选择识别图中的二维码)
在调用图像之前,需创建一个事件监听器,为其保证图像已经正确的加载。
如下图:
监听图片已经正确加载
2、把图像显示在画布上面,这里将不再使用createPattern(),改而使用drawImage()函数来实现
提示:createPattern()用在图像填充,而drawImage()是直接加载图像。两者有明显的区别,不要混淆了哦!
drawImage()中包含9个参数,第一个参数:Image对象,也就是图片。第二个和第三个参数定义画布上图像左上角的起始点。第四个和第五个参数定义图像的大小。第六个和第七个参数表示复制图像后的目标位置。第八个和第九个参数定义被复制的图形的大小。
具体用法如下:
图片加载代码
图片加载预览效果
web前端/H5/javascript学习群:250777811
欢迎大家关注我的微信号公众号,公众号名称:web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧(长按下面的二维码图片、并选择识别图中的二维码)
相关文章推荐
- html5之Canvas(基础用法,转换矩阵,图像混合)
- HTML5(二) canvas基础
- HTML5 Canvas 图像动画的实现(实例小球弹跳)
- HTML5绘图基础_01_Canvas的使用
- Html5 canvas学习4-图像
- 小强的HTML5移动开发之路(6)——Canvas图形绘制基础
- HTML5基础,第4部分:点睛之笔Canvas
- HTML5基础,第4部分:点睛之笔Canvas (2)
- html5 canvas 绘制图像、画布或视频
- HTML5基础之canvas绘图(一)
- HTML5 canvas 动画基础自学分享 1
- HTML5 Canvas初体验之绘图基础
- 使用html5 canvas操作图像像素
- HTML5 Canvas图像放大、移动实例1
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- HTML5新特性之Canvas+drag(拖拽图像实现图像反转)
- HTML5中canvas知识点详解7-使用图像
- html5 canvas基础(1)--路径
- Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
- 【HTML5】Canvas基础知识讲解