【canvas】基础练习三 图片
【canvas】Demo1 drawImage
drawImage(img,x,y);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片</title> </head> <body> <canvas id="wapper" width="500" height="500"></canvas> <script> var wapper = document.getElementById('wapper'), _2d = wapper.getContext('2d');/*2d的绘制对象*/ var logo = new Image(); logo.src = 'http://www.baidu.com/img/bd_logo1.png'; logo.onload = function (){ _2d.drawImage(this, 0, 0); } </script> </body> </html>
【canvas】Demo2 drawImage
drawImage(img,x,y)
drawImage(img,x,y,w,h)
drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片</title> </head> <body> <canvas id="wapper" width="500" height="500"></canvas> <script> var wapper = document.getElementById('wapper'), _2d = wapper.getContext('2d');/*2d的绘制对象*/ var logo = new Image(); logo.src = 'http://icon.xgo-img.com.cn/mainpage/20150226/logo_07.jpg'; logo.onload = function (){ _2d.drawImage(this, 0, 0);/*drawImage(img,x,y)*/ _2d.drawImage(this, 300, 0, 100, 100);/*drawImage(img,x,y,w,h)*/ _2d.drawImage(this, 50, 50,100,100,0,200,100,100);/*drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)*/ } </script> </body> </html>
【canvas】Demo3 getImageData putImageData createImageData
getImageData获取图片上的一部分数据
putImageData绘制获取图片上的数据
createImageData创建新像素
目前没有找到这三个方法的优点,暂不示例。