• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5使用drawImage()方法绘制图像

HTML5使用drawImage()方法绘制图像

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,绘制图像,drawImage等相关知识,佚名 希望在学习及工作中可以帮助到您
一、绘制图像

使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。
drawImage(image,x,y) : 在canvas中(x,y)处绘制图片。
drawImage(image,x,y,width,height) : 在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度。
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) : 从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight),缩放到指定的宽度和高度,并在canvas中(x,y)绘制出来。

二、<img>标签

绘制图片前,还需要将图片加载到浏览器中。这里我们仅仅在canvas标签后面添加一个<img>标签。

<img src = "tk.jpg" id = "tkjpg">

三、绘制图片

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03html5 touch事件实现触屏页面上下滑动(二)_html5教程技巧
  • 2017-08-06浅析移动设备HTML5页面布局
  • 2017-08-06html5 canvas实现圆形时钟代码分享
  • 2018-12-03HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载_html5教程技巧
  • 2018-12-03详解HTML5地理定位与第三方工具百度地图的应用
  • 2018-12-03分享移动端网页宽度值实例代码
  • 2017-08-06HTML5各种头部meta标签的功能(推荐)
  • 2018-12-03Dreamweaver只是一个工具,为什么这么多招聘要求一定要熟练使用它?
  • 2017-08-06HTML5安全介绍之内容安全策略(CSP)简介
  • 2018-12-03Android自定义环形LoadingView效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5应用程序缓存Application Cache详解
    • html5 Canvas画图教程(5)—canvas里画曲线之arc方法
    • vue2.0使用swiper实现轮播广告
    • phonegap本地存储详解
    • html5 canvas 画图教程案例分析_html5教程技巧
    • phonegap使用方法介绍(二)获取位置信息
    • canvas中beginPath()和closePath()作用的实例解析
    • 移动端WEB开发中click,touch,tap事件使用详解
    • HTML5学习笔记之html5与传统html区别
    • HTML5通过调用canvas对象的getContext()方法来获取绘图环境_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有