canvas教程

Canvas操作像素实现颜色的增删改

字号+ 作者:H5之家 来源:H5之家 2017-10-18 13:00 我要评论( )

对于Canvas的使用,官方还是提供了不少api,但是任然有许多使用的功能官方没有提供,需要我们自己去实现。

对于Canvas的使用,官方还是提供了不少api,但是任然有许多使用的功能官方没有提供,需要我们自己去实现。

1、增,即颜色填充。

对于颜色填充用fill相关的方法可以实现基本的填充,但是如果我们有更多的条件,比如需要将特定区域内的透明区域填充上颜色,fill方法就没办法实现了,我们可以通过imageData入手,根据透明区域的像素alpha值为0这个特性来实现这个方法:

/** * @params imageData 输入像素 * @params x 开始填充的x坐标 * @params y 开始填充的y坐标 * @params fillColor 需要填充的颜色 * @aprams width 填充区域的宽 * @params height 填充区域的高 */ function fillColor(imageData,x,y,fillColor,width,height){ var x = x || 0, y = y || 0, w = x + w || imageData.width, h = y + h || imageData.height; if(x<0 || y<0 || w>imageData.width || h>imageData.height){ throw new Error("error params!"); } for(var j=y;j<h;j++){ for(var i=x;i<w;i++){ var index = j * imageData.width + i, a = imageData.data[4*index+3]; if(a == 0){ imageData.data[4*index] = fillColor.r; imageData.data[4*index+1] = fillColor.g; imageData.data[4*index+2] = fillColor.b; imageData.data[4*index+3] = 255; } } } return imageData; }

2、删,改即颜色的删除和替换

对于特定区域的图形的清除,我们可以通过clearRect来达到目的,但是对于特定区域内颜色的替换,我们需要另觅他径,同样的我们可以通过像素的操作来实现:

/** * @params imageData 输入像素 * @params x 开始替换的x坐标 * @params y 开始替换的y坐标 * @params sourceColor 需要替换的颜色的rgb值,以对象形式传入 * @aprams w 替换区域的宽 * @params h 替换区域的高 * @params replaceColor 需要替换成的颜色,留空则删除原颜色 */ function replaceColor(imageData,x,y,sourceColor,w,h,replaceColor){ var x = x || 0, y = y || 0, w = x + w || imageData.width, h = y + h || imageData.height; if(x<0 || y<0 || w>imageData.width || h>imageData.height){ throw new Error("error params!"); } for(var j=y;j<h;j++){ for(var i=x;i<w;i++){ var index = j * imageData.width + i, r = imageData.data[4*index], g = imageData.data[4*index+1], b = imageData.data[4*index+2]; if(r==sourceColor.r && g==sourceColor.g && b==sourceColor.b){ if(replaceColor){ imageData.data[4*index] = replaceColor.r; imageData.data[4*index+1] = replaceColor.g; imageData.data[4*index+2] = replaceColor.b; imageData.data[4*index+3] = 255; }else{ imageData.data[4*index+3] = 0; } } } } return imageData; }

 

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

相关文章
  • Canvas教程(6)

    Canvas教程(6)

    2017-10-18 14:34

  • Canvas操作像素实现颜色的增删改

    Canvas操作像素实现颜色的增删改

    2017-10-18 13:00

  • Html5 Canvas 概述,学习WebGL,WebGL教程,WebGL参考手册

    Html5 Canvas 概述,学习WebGL,WebGL教程,WebGL参考手册

    2017-10-18 12:04

  • [教学视频]利用HTML5画布绘制精美动态效果

    [教学视频]利用HTML5画布绘制精美动态效果

    2017-10-18 12:04

网友点评