代码实例：

<!DOCTYPE html>

<html>

	<head>

		<style>

		canvas{

		background:#eee;

		}

		</style>

		<title>noTitle</title>

		<meta charset="utf-8">

		<script>

			window.onload=function  () {

			 var canvas=document.getElementById("canvas");

			 var cobj=canvas.getContext("2d");

			 var img=document.getElementById("img");

			 cobj.drawImage(img,0,0,200,240);

			 var imgData=cobj.getImageData(0,0,200,240)

			 cobj.putImageData(menl (imgData,6),200,240);

			}

			  function menl (imgData,num) {

				for (var i=0; i<imgData.width*imgData.height; i++) {

					   if(i%6==0){

					   imgData.data[i*4+0]=0;

					   imgData.data[i*4+1]=0;

					   imgData.data[i*4+2]=0;

					   imgData.data[i*4+3]=0;

					   }

					 }

					 return imgData;

			  }

		</script>

	</head>

	<body>

		<canvas id="canvas" width=500  height=500>

		</canvas>

		<img src="图片.jpg" id="img" hidden>

	</body>

</html>

　　效果：

图片：

2017-09-12 11:29:35

canvas 操作像素 窗帘效果的更多相关文章

  1. 使用Canvas操作像素

    现代浏览器支持通过<video>元素播放视频.大多数浏览器也可以通过MediaDevices.getUserMedia() API访问摄像头.但即使这两件事结合起来,我们也无法直接访问和操 ...

  2. canvas 操作像素 反相

    代码实例: <!DOCTYPE html> <html> <head> <style> canvas{ background:#eee; } </ ...

  3. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  4. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  5. OpenCV2计算机编程手册（一）操作像素

    1. 引言 从根本上来说,一张图像是一个由数值组成的矩阵.这也是opencv中使用 代表黑色,代表白色.对于彩色图像(BGR三通道)而言,每个像素需要三个这样的8位无符号数来表示,这种情况下,矩阵的元 ...

  6. 学习Opencv 2.4.9（二） ---操作像素

    作者:咕唧咕唧liukun321 来自:http://blog.csdn.net/liukun321 本质上说一张图像就是由数值组成的矩阵.Opencv 2.x由 cv::Mat 这个数据结构来表示一 ...

  7. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  8. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  9. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

随机推荐

  1. WEB前端开发的思考与感悟

    当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候,突然就深刻的体会到了这句话确实太有道理了. 最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等.遇到过 ...

  2. 百度ueditor新增的将word内容导入到富文本编辑框的功能.

    如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. New Relic性能监控（一）概览

    New Relic性能监控(一)概览 2018-04-12 琅琊书生 本系列文章基于公司使用New Relic的经验,鉴于国内较少有这方面的文章,因此把我工作中了解到的知识分享给大家,希望可以给需要的 ...

  4. yum python mysql

    lrwxrwxrwx root root Jun : pyspark -> /etc/alternatives/pyspark lrwxrwxrwx root root Jul : python ...

  5. MySql 5.7.20 绿色版安装

    MySql 5.7.20 绿色版安装 一.MySql 安装 1.从官网下载绿色压缩包. 2.解压安装文件到指定目录 3.创建配置文件 my.ini 到解压文件的根目录,my.ini 配置文件如下,需将 ...

  6. gitlab+jenkins自动化打包APK

    前置条件: 环境搭建,jenkins需要的插件看这里: gitlab+jenkins自动化打包IOS 配置思路: step1: 搭建sdk,gradle运行环境,参照: CentOS7下安装安装and ...

  7. 001-notepad++下载安装、添加右键

    一.下载 1.1.下载地址:https://notepad-plus-plus.org/ 一般下载 /1.2 1.2.解压至指定路径下即可 1.3.注册表添加鼠标右键 添加鼠标右键, 保存成reg执行 ...

  8. swiper在vue中的用法

    首先通过npm i vue-awesome-swiper --save 来在vue中下载插件 然后再main.js中引入 require('swiper/dist/css/swiper.css')im ...

  9. python简单的函数定义和用法实例

    python简单的函数定义和用法实例 这篇文章主要介绍了python简单的函数定义和用法,实例分析了Python自定义函数及其使用方法,具有一定参考借鉴价值,需要的朋友可以参考下 具体分析如下: 这里 ...

  10. spss如何选择需要的变量？

    spss如何选择需要的变量? 今天一位网友问我,spss如何在许多字段(变量)中选择我需要的字段,而不显示其他的字段呢? 这个问题问的很好,在实际的数据分析或者挖掘的过程中,都需要用这个来找出对商业问 ...