代码实例:

<!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. HashMap的几种遍历方式(转载)

    今天讲解的主要是使用多种方式来实现遍历HashMap取出Key和value,首先在java中如果想让一个集合能够用for增强来实现迭代,那么此接口或类必须实现Iterable接口,那么Iterable ...

  2. 状态管理Vuex的使用总结

    1.Vuex.store 的基本使用 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vu ...

  3. python 使用xlsxwriter的方法属性

    http://xlsxwriter.readthedocs.io/format.html

  4. python之面向过程,函数式编程,面向对象浅析

    python编程有面向过程.面向函数.面向对象三种,那么他们区别在哪呢?这个问题,让我想起我在学习编程的时候,我的老师给我举的例子.分享给大家. 面向过程就是将编程当成是做一件事,要按步骤完成! 比如 ...

  5. Linux shell 归纳之 ~/. 是什么意思

    假设用户名目录是:/home/test ~> cat ~/.profile ~ 是代表用户名目录/home/test/ .是代表隐藏文件, profile 就是home/test目录下的隐藏文件

  6. 2019牛客暑期多校训练营(第九场)H Cutting Bamboos(主席树+二分)

    题意:n个竹子,有高度,q次询问,询问之间是独立的,每次查询输入l,r,x,y代表砍区间[l,r]]内的竹子砍y次,最后一次要砍成0,每次砍掉的总长度相同,问第x次砍的高度是多少. 既然每次要求砍掉的 ...

  7. 「PHP开发APP接口实战009」日常安全防范之防SQL入和XSS攻击

    防SQL注入和XSS攻击通用过滤 首先在 /app/library/ 目录下创建 Security.php 文件并添加以下代码: <?php /** * * 防SQL注入和XSS攻击通用过滤 * ...

  8. ModuleNotFoundError: No module named 'mysql'

    问题:使用sqlalchemy初始化数据库报错,如图: 解决办法: pip install mysql-connector 安装后即可正常运行了 参照: https://blog.csdn.net/j ...

  9. 《图解设计模式》读书笔记3-2 Prototype模式

    目录 Prototype(原型)模式的由来 类图 代码 角色 我的理解 Prototype(原型)模式的由来 创建一个实例,可以关键字new创建.但有时候,我们需要在不指定类名的前提下生成实例,比如: ...

  10. linux新建用户并修改提示符

    1 新建用户 # useradd –d /home/ap/testapp -m testapp 此命令创建了一个用户testapp ,其中-d和-m选项用来为登录名testapp 产生一个主目录/ho ...