canvas教程

canvas基础学习(二),canvas基础学习

字号+ 作者:H5之家 来源:H5之家 2017-01-14 08:00 我要评论( )

canvas基础学习(二),canvas基础学习。canvas基础学习(二),canvas基础学习 一、图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1、

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; } } }; }

效果图为

用的图片是

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas学习(一)

    canvas学习(一)

    2017-01-13 18:04

  • 【html5 canvas开发技巧】

    【html5 canvas开发技巧】

    2017-01-13 15:04

  • jQuery基础和jQuery选择器教程.pdf

    jQuery基础和jQuery选择器教程.pdf

    2017-01-13 09:02

  • 随想录(canvas学习)

    随想录(canvas学习)

    2017-01-13 08:00

网友点评