【HTML】Canvas(3)-绘制图片
来源:互联网 发布:双色球算法必中6红预测 编辑:程序博客网 时间:2024/05/16 12:19
开发游戏的时候,游戏中的地图、背景、任务、物品等都是由图片组成的,这次我们来谈谈在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.onload=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.onload=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.onload=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)-绘制图片
- HTML Canvas 绘制五角星
- HTML canvas 绘制
- canvas 绘制图片
- canvas 绘制半透明图片
- canvas绘制图片详解
- Canvas绘制图片模糊
- Canvas绘制图片
- 【HTML】Canvas(1)-绘制图形
- 【HTML】Canvas(2)-绘制文本
- 使用html5 canvas绘制图片
- canvas中绘制图片居中
- HTML5之canvas绘制图片
- android Canvas绘制图片模糊
- html canvas压缩图片
- Canvas之绘制图片与裁剪图片
- HTML 5 Canvas通过 JavaScript 来绘制
- HTML使用canvas载入图片
- Android的Application对象讲解
- [刷题]Insert Node in a Binary Search Tree
- 【j2ee spring】10、整合SSH框架(3)
- HDU 1133 Buy the Ticket
- 移动App该如何保存用户密码
- 【HTML】Canvas(3)-绘制图片
- 关于计算机操作系统的进程线程的个人看法理解
- 安装低版本的make
- FTP主动模式和被动模式的比较
- AngularJS简单的helloworld示例
- 解决Eclipse导入他人项目后出现红感叹号的方法
- poj 3692 二分图最大匹配
- I2C总线
- null或空值的判断处理