javascript canvas
文章平均质量分 72
Daniel_SYR
还是学生
展开
-
HTML5 canvas标签-2 简单的3种滤镜
在发现canvas有这么多功能后,我首先尝试着去做一些滤镜最基本的就是胶片 这个在w3school上有demo假设原本颜色为rgb(r,g,b);只需要将它变成rgb(255-r,255-g,255-b);即可原图处理后的 for (var i=0;i<canvas.width;i++){ for (var j=0;j<canvas.heigh原创 2016-09-15 15:54:07 · 285 阅读 · 0 评论 -
HTML5 canvas标签-1 基本使用
终于有空使用csdn和大家分享点自己平时学习工作时候的心德啦~第一步 介绍下canvas的基本使用:首先 因为canvas是html5的一个标签 所以保险起见 可以先确认下canvas是否兼容try { document.createElement("canvas").getContext("2d"); console.log("canvas可以使用"); }原创 2016-09-15 15:33:30 · 296 阅读 · 0 评论 -
HTML5 canvas标签-3 简单灰度化的实现
在RGB模型里当R=G=B时候那么这个颜色就是一个灰度颜色范围是从0-255的 有四种方式可以实现,当然每个方式实现的效果都是不一样的原图:1 加权平均方法 就是利用灰度公式 根据人眼对色彩敏感程度进行处理的一种方式约等于f(i,j)=0.30R(i,j)+0.59G(i,j)+0.11B(i,j))代码如下 for (var i=0;i<canvas.w原创 2016-09-16 13:10:54 · 374 阅读 · 0 评论 -
HTML5 canvas标签-4 灰度直方图的实现
图像分析中,灰度直方图是相当有实用价值的东西制作灰度直方图 首先需要把图片灰度化 详细内容见上一个章节接下来把数组里每个灰度值出现的次数统计下来最后进行绘图就可以了 function getHistogram(imgData){ //先灰度化 var data = imgData,detailArr = [],heightOfCanvas =原创 2016-09-16 18:20:58 · 503 阅读 · 0 评论 -
HTML5 canvas标签-5 浮雕算法
浮雕算法,顾名思义,就是将图像变成类似石头雕塑的算法(来源于百度)这就是一个浮雕 我们看看它的特点 首先颜色整体 偏灰(上一篇博客中说过,在RGB中,R=G=B时便是灰色)其次就是层次分明。所以根据上述这两点,我们代码首先需要找出图片边界,其次把图片整体变灰。其实找出边界很简单。就是比较相邻两点的RGB值。如果他们差异很大便说明这边有颜色剧烈的变化。所以最简洁的办法就是原创 2016-09-20 16:06:34 · 952 阅读 · 0 评论