canvas基础学习（二），canvas基础学习

一、图像绘制

canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式

1、ctx.drawImage(img,x,y);

img是指图像对象，x和y分别是这个图像左上角在canvas画布的坐标，而图像显示的大小为图像本身的像素值，超出canvas画布的部分不显示。

2、ctx.drawImage(img,x,y,w,h);

和上面的那个函数相比，可以控制图像在canvas中显示的宽度和高度，而不再是图片自身的高宽像素

3、ctx.drawImage(img , dx , dy , dw , dh , x , y , w , h);

这个又比之前的函数多了dx、dy、dw、dh这四个参数，这四个参数可以控制图片切片显示在canvas画布中。在图片上同样以左上角为原点，向右为X轴正方向，向下为Y轴正方向，这四个参数表示，在图片中在(dx,dy)这个坐标，切dw和dh大小的切片。然后将这个切片显示在canvas画布上。

最后这个img参数，不单单可以是Image对象，还可以是video对象，也可以是另外的canvas对象。所以可以通过该方法对video视频进行截屏，也可以通过加载canvas制作图像水印、放大镜、以及淘宝双11主会场那样的特效，一个canvas加载另一个canvas，也被称为canvas的离屏技术。

 

二、图像的像素级处理

1、ctx.getImageData(x , y , w , h);

这个方法是获取画布(x,y)坐标，宽高分别为w和h的像素对象。而这个对象的data属性，则是其rgba的值。一个画布的像素值是从画布的原点，从左向右，从上到下，一排一排的排列下来的。常用取出canvas像素值的方法有两种，一种是采用一层循环，另一种是采用双重for循环，代码如下：

var imageData = ctx.getImageData(0 , 0 , canvasW , canvasH), pixelData = imageData.data; (var i = 0; i < canvasH*canvasW ; i++){ var r = pixelData[4*i + 0], g = pixelData[4*i + 1], b = pixelData[4*i + 2], a = pixelData[4*i + 3]; } (var y = 0 ; i < canvasH ; y++){ for(var x = 0 ; x < canvasW ; x++){ var pixe = canvasW*y + x, r = pixelData[4*pixe + 0], g = pixelData[4*pixe + 1], b = pixelData[4*pixe + 2], a = pixelData[4*pixe + 3]; } }

 

2、ctx.putImageData()

该方法是设置canvas画布上的像素数据，它有七个参数，在w3c上是这么解释的

 我的理解就是将imgData,放在画布上的位置是(x + dirtyX , y + dirtyY)，高宽分别是dirtyHeight、dirtyWidth的矩形。

 

三、代码demo

1、图片缩放，以及像素变换

图像学习 #main,#copy,.contain{ margin padding float #main{ cursor:move } .contain *{ padding margin z } .contain a{ display text-align margin-top font-size line-height 亲，您的浏览器不支持canvas 缩放 style灰度转换黑度转换反相转换模糊处理马赛克处理 亲，您的浏览器不支持canvas 亲，您的浏览器不支持canvas <!-- 水印作图的canvas，把一个canvas载入另一个canvas的做法叫做，离屏canvas document.body.onload = function(){ ), scaleChange ), copyCanvas ), waterMarkCanvas ), ctx ), copyCtx ), canvasW = canvas.width, canvasH = canvas.height; Image(); img.src ; img.onload init(); } init(){ toolFunc.handleWaterMark(); toolFunc.handleScale(); toolFunc.drawImg(); toolFunc.handleEffect(); toolFunc.handleCanvasMove(); } { scaleImgX : 0, scaleImgY : 0, drawImg : scaleChange.value; scale, imgH scale, x y; moveY){ x moveX; y moveY; tempY){ return; } } ctx.clearRect( , canvasW , canvasH); ctx.drawImage(img , x , y , imgW , imgH); ctx.drawImage(waterMarkCanvas , canvasW - waterMarkCanvas.width , canvasH - waterMarkCanvas.height , waterMarkCanvas.width , waterMarkCanvas.height); x; y; }, handleWaterMark : ; waterMarkCanvas.height = 70; ); waterCtx.font ; waterCtx.lineWidth = 1; waterCtx.fillStyle ; waterCtx.textAlign ; waterCtx.textBaseline ; waterCtx.fillText( , waterMarkCanvas.width); }, handleScale : , _this = this; scaleChange.onmousedown = function(){ isScale = true; } scaleChange.onmousemove = function(){ _this.drawImg(); } } scaleChange.onmouseup = function(){ isScale = false; } }, handleEffect : imageData,pixelData; document.getElementById( , canvasW , canvasH); pixelData = imageData.data; ){ ], g ], b ], grey grey; pixelData[ grey; pixelData[ grey; } copyCtx.putImageData(imageData,,canvasW,canvasH); } document.getElementById( , canvasW , canvasH); pixelData = imageData.data; ){ ], g ], b ], grey ){ return 255; }else{ return 0; } })(r); pixelData[ grey; pixelData[ grey; pixelData[ grey; } copyCtx.putImageData(imageData,,canvasW,canvasH); } document.getElementById( , canvasW , canvasH); pixelData = imageData.data; ){ ], g ], b ]; pixelData[ r; pixelData[ g; pixelData[ b; } copyCtx.putImageData(imageData,,canvasW,canvasH); } document.getElementById( , canvasW , canvasH); pixelData = imageData.data; ){ ){ var totalR,totalG,totalB; totalR ; ){ ){ n, pixe piexX; totalR ]; totalG ]; totalB ]; } } j; pixelData[ } } copyCtx.putImageData(imageData,,canvasW,canvasH); } document.getElementById( , canvasW , canvasH); pixelData = imageData.data; size; size){ size){ var totalR,totalG,totalB; totalR ; ){ ){ y, px x, pixe canvasW; totalR ]; totalG ]; totalB ]; } } ){ ){ dy, px dx, pixe canvasW; pixelData[ newR; pixelData[ newG; pixelData[ newB; } } } } copyCtx.putImageData(imageData,,canvasW,canvasH); } }, handleCanvasMove:, lastX,lastY; canvas.onmousedown = function(e){ e.preventDefault(); isCanvasMove = true; lastX canvas.getBoundingClientRect().left; lastY canvas.getBoundingClientRect().top; } canvas.onmousemove = function(e){ e.preventDefault(); ; canvas.getBoundingClientRect().left, y canvas.getBoundingClientRect().top; lastX), moveY lastY); toolFunc.drawImg(moveX,moveY); lastX = x; lastY = y; } canvas.onmouseup = function(e){ e.preventDefault(); isCanvasMove = false; } canvas.onmouseout = function(e){ e.preventDefault(); isCanvasMove = false; } } }; }

效果图为

用的图片是