【HTML】Canvas(3)-绘制图片
开发游戏的时候,游戏中的地图、背景、任务、物品等都是由图片组成的,这次我们来谈谈在canvas中如何操作图片吧。
canvas中提供了drawImage函数和putImageData函数来绘制图片。
drawImage()函数有3种函数原型,语法如下:
drawImage(image,dx,dy);
drawImage(image,dx,dy,dw,dh);
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
参数一image是要绘制的对象,这个参数可以是HTMLImageELement、HTMLCanvasElement、HTMLVideoElement,
dx,dy是image在canvas中定位的坐标值,
dw,dh表示image在canvas中即将绘制的区域(相对dx和dy坐标的偏移量)的宽度和高度值,
sx,sy是image所要绘制的起始位置,
sw,sh是image所要绘制的区域(相对image的sx和sy坐标的偏移量)的宽度和高度值
先准备好HTML部分:
<body>img标签<br/><img src="../images/travel.jpg" id="travel" alt="travel" title="travel"/><br/><br/><br/>canvas画板<br/><!-- PS:画板要设定宽高值,且要不能小于原图,否则图片会显示不完整 --><canvas id="mycanvas" width="500" height="500"> 你的浏览器不支持HTML5</canvas>
</body>
Javascript部分:
方法一:通过<img>标签来获取
var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');//获取图片id,取得图片数据var img=document.getElementById('travel');//用drawImage()函数将图片绘制到画板上ctx.drawImage(img,0,0);
方法二:通过javascript的Image对象来获取
先创建一个Image对象,然后通过设置src属性来载入图片,接着添加onload事件侦听,当图片载入完成时将其绘制到画板上。
var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');var img=new Image();img.src='../images/travel.jpg';img.οnlοad=function(){ctx.drawImage(img,0,0);};
我们来具体看下 drawImage函数的3种函数原型的用法和区别:
var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');var image=new Image();image.src='../images/travel.jpg';image.οnlοad=function(){//表示从坐标(0,0)开始绘制整张图片ctx.drawImage(image,0,0);//表示从坐标(200,0)开始绘制整张图片到长100,宽100的矩形区域内ctx.drawImage(image,200,0,100,100);//表示截取图片从(50,50)到(100,80)的部分,从坐标(200,110)开始绘制放到长100,宽60的矩形区域内ctx.drawImage(image,50,50,100,80,200,110,100,60);};
还有一种绘制图片的方法,就是利用getImageData和putImageData绘制图片:
putImageData(imgdata,dx,dy,sx,sy,sw,sh)函数的7个参数中,imgdata是像素数据,dx,dy是绘制图片的定位坐标值,sx,sy是imgdata所要绘制图片的其实位置,sw,sh是imgdata所要绘制区域(相对imgdata的sx,sy坐标的偏移量)的宽度和高度值。后4个参数可以省略,此时表示绘制整个imgdata
在使用putImageData()前,需先用getImageData(x,y,w,h)函数得到像素数据,即从canvas画板上取得所选区域的像素数据,它的4个参数分别是:选择区域七点的坐标x和坐标y,选择区域的长和宽。
putImageData(imagedata,dx,dy,x,y,w,h)函数则表示将所得到的像素数据描画到canvas画板上形成图形。
var c=document.getElementById('mycanvas');var ctx=c.getContext('2d');var image=new Image();image.src='../images/travel.jpg';image.οnlοad=function(){ctx.drawImage(image,0,0);var imgData=ctx.getImageData(50,50,192,168);ctx.putImageData(imgData,200,260);ctx.putImageData(imgData,200,260,50,50,100,100);};
注:使用getImageData函数获取图片数据,此函数在chrome,Firefox,ie等浏览器中会涉及跨域问题,所以无法直接在浏览器中浏览,必须通过服务器来访问测试。
Author:致知
Sign:路漫漫其修远兮,吾将上下而求索。
附:
【HTML】Canvas(1)-绘制图形
【HTML】Canvas(2)-绘制文本
【HTML】Canvas(4)-进阶
【HTML】Canvas(3)-绘制图片相关推荐
- html5canvas绘制图片源码,HTML5 CANVAS:绘制图片
HTML5 CANVAS:绘制图片 通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
- 前端html生成图片,HTML5 Canvas:绘制图片
通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素类型: HTMLImageEleme ...
- 微信小程序canvas 2d 绘制图片与文字 导出图片
wxml内容 如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
- 小程序 canvas 2d 绘制图片并保存
获取canvas实例,使用的官方的代码.用一个变量canvas保存实例,后续保存时会调用. data () {return {canvas: null // 实例} }, onReady() {con ...
- 微信小程序canvas保存绘制图片
上篇文章大概写了一下canvas绘制图片的问题,那么接下来记录一下canvas保存图片的问题~ wx.canvasToTempFilePath() //把当前画布指定区域的内容导出生成指定大小的图片 ...
- canvas动态绘制图片的方法
应用场景 在制作html5小游戏时需要使用canvas绘制图片,但是图片是异步加载的,需要发送请求获取数据,这就导致不能在设置src之后直接使用绘制方法,而是需要等待图片加载完成. 加载单张图片 使用 ...
- 自定义View起步:Canvas之绘制图片
在前面的章节中,我们已经介绍了Canvas的一些基本操作,今天我们继续讲解,Canvas类的用法,可见这个类在自定义View中是多么的重要.今天我们来着重介绍一下如何绘制图片和文字.在这一章节学习之后 ...
- html2canvas是否截图成功状态值,前端使用html2canvas截图,在canvas上绘制图片及保存图片...
eclipse安装swing插件 最近想用java做个小应用,是那种可视化图形类的应用.因为一直比较懒,所以打算用swt拖拖拽拽.于是在就去找swt,这是以前的办法.结果发现原来最新版的eclipse ...
- 微信小程序 canvas type = 2d 绘制海报心得(包括怎么绘制图片和圆角图片和圆角矩形等)
微信小程序 canvas type=2d 使用心得 为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
最新文章
- CodeSmith实用技巧(十四):使用Progress对象
- Linux环境下查PG库的慢sql,postgresql慢SQL
- Spring IOC源代码具体解释之容器初始化
- WebLogic Classloader分析工具
- Scala 写第一个程序HelloWorld
- 【UML】使用环境(转)
- opencv 直方图_OpenCV-Python 直方图-3:二维直方图 | 二十八
- ssis导入xml_SSIS包中的XML任务概述
- mysql在线备份恢复--Xtrabackup
- 【转】深度学习最全优化方法总结比较(SGD,Adagrad,Adadelta,Adam,Adamax,Nadam)
- 王庆的边缘计算(第四章)
- 冰点下载器手机版apk_冰点文库下载器
- maya_Vray模型属性批量修改插件 v1.01 下载及教程
- excel VBA编程入门,自定义excel数据库模板生成sql语句
- 服务器显卡驱动重装系统,GPU显卡驱动重装
- 大多数人奋斗一辈子才能得到的东西,你见过吗?
- python os.getcwd用法_os.getcwd()
- Linux学习(一)虚拟机安装linux资源,linux目录结构,购买阿里云服务器远程登陆linux,下载安装并使用Xshell与Xftp
- html map插件,jQuery谷歌地图插件maplace.js
- 浪潮服务器光盘装系统教程图解,浪潮服务器安装操作系统简要步骤说明.doc
热门文章
- 【OI生涯】我学OI是为了什么?
- 从administrators组中删除guest来宾账户时提示无法在内置账号上运行此操作的解决办法...
- 中医大2020年7月网考计算机应用基础,2020年7月网络教育统考《计算机应用基础》Internet应用模拟题试卷2...
- 自己用的停用词(2955个)
- jdk1.8 Lambda表达式的使用
- iDrac6 虚拟控制台 连接失败
- FFmpeg给mp4视频加上旋转90度的代码
- 电阻 电容 电感 磁珠的选型总结对比
- 免费wiki系统php,HDWiki
- python中str函数用法_python中str内置函数用法总结