html5进阶之canvas图像基础
2024-10-21 04:59:49
1、首先还是使用之前讲过的Image()函数来预加载图像。
在调用图像之前,需创建一个事件监听器,为其保证图像已经正确的加载。
如下图:
监听图片已经正确加载
2、把图像显示在画布上面,这里将不再使用createPattern(),改而使用drawImage()函数来实现
提示:createPattern()用在图像填充,而drawImage()是直接加载图像。两者有明显的区别,不要混淆了哦!
drawImage()中包含9个参数,第一个参数:Image对象,也就是图片。第二个和第三个参数定义画布上图像左上角的起始点。第四个和第五个参数定义图像的大小。第六个和第七个参数表示复制图像后的目标位置。第八个和第九个参数定义被复制的图形的大小。
具体用法如下:
图片加载代码
图片加载预览效果
web前端/H5/javascript学习群:250777811
欢迎大家关注我的微信号公众号,公众号名称:web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧(长按下面的二维码图片、并选择识别图中的二维码)
最新文章
- WebAPI 安全性 使用TOKEN+签名验证(上)
- Java中的Filter过滤器
- 【转】HTML5的语音输入 渐进使用HTML5语言识别, so easy!
- Android WebView支持WebGL
- Solr4.7缓存技术
- BIZTALK项目中WEB引用WEBSERVICES服务时候报错
- JAVA实用案例之水印开发
- App测试流程及测试点(个人整理版)
- Spring MVC 拦截器 (十)
- c复杂函数指针
- Linux中设置别名
- Win10系列:C#应用控件基础12
- C# EasyHook MessageBox 示例(极简而全)
- 第一个FPGA工程—LED流水灯
- 怎么在项目中使用前端包管理器bower和构建工具gulp
- CSS 鼠标选中文字后改变背景色的实现代码
- 喵哈哈村的魔法考试 Round #5 (Div.2) 题解
- WebLogic清理缓存
- redis中键空间通知
- 利用grep命令查找字符串分析log文件的一次实践
热门文章
- ElasticSearch学习笔记(二)-- mapping
- Column 'sort' specified twice错误
- JavaScript - 问题集 - 含function的json对象与json字符串之间相互转换
- 编译器错误消息: CS1617: 选项“6”对 /langversion 无效
- 【Kernal Support Vector Machine】林轩田机器学习技术
- HTTP - 请求头的具体含义
- wxPython 界面编程的有关事件
- java实现最大堆
- 1079 Total Sales of Supply Chain (25 分)(树的遍历)
- 使用pl/sql在oracle中新建表和对应序列