canvas 操作像素 窗帘效果
代码实例：
<!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 操作像素 窗帘效果的更多相关文章
- 使用Canvas操作像素
现代浏览器支持通过<video>元素播放视频.大多数浏览器也可以通过MediaDevices.getUserMedia() API访问摄像头.但即使这两件事结合起来,我们也无法直接访问和操 ...
- canvas 操作像素 反相
代码实例: <!DOCTYPE html> <html> <head> <style> canvas{ background:#eee; } </ ...
- canvas动态小球重叠效果
前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- OpenCV2计算机编程手册（一）操作像素
1. 引言 从根本上来说,一张图像是一个由数值组成的矩阵.这也是opencv中使用 代表黑色,代表白色.对于彩色图像(BGR三通道)而言,每个像素需要三个这样的8位无符号数来表示,这种情况下,矩阵的元 ...
- 学习Opencv 2.4.9（二） ---操作像素
作者:咕唧咕唧liukun321 来自:http://blog.csdn.net/liukun321 本质上说一张图像就是由数值组成的矩阵.Opencv 2.x由 cv::Mat 这个数据结构来表示一 ...
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客
Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼
随机推荐
- python 3.6连接数据库（pymysql方式）
pymysql 模块可以通过 pip 安装.但如果你使用的是 pycharm IDE,则可以使用 project python 安装第三方模块. [File] >> [settings] ...
- js里面常用的正则表达式
在工作中经常碰到关于表单的验证,一般采取正则表达是比较简洁,代码量少,但是却经常忘记一些正则的用法.下面记录工作中经常用到的正则表达式. * 代表0次或者多次 +代表1次或者多次 ?代表0次或者 ...
- Codeforces D. Array Division
题目链接:http://codeforces.com/contest/808/problem/D 题意: 这一题给你一个数组,你可以调换某一个数的位置,使得这个数组可以分成2半,前半段的和等于后半段( ...
- 同余dp
先验知识: 余数的计算公式:c = a -⌊ a/b⌋ * b 其中,⌊ ⌋为向下取整运算符,向下取整运算称为Floor,用数学符号⌊ ⌋表示 题目: Consider an arbitrary se ...
- python实现处理excel单元格中的数据
实现代码如下: # 将数据单元格(格式为:参数名=值)里的数据以键值对的形式放入字典中,返回该字典 class get_string: def cut_string(self,string): # 将 ...
- LeetCode 144. Binary Tree Preorder Traversal 动态演示
先序遍历的非递归办法,还是要用到一个stack class Solution { public: vector<int> preorderTraversal(TreeNode* root) ...
- Android深度探索-卷1第九章心得体会
在android系统中使用Linux 驱动有两种方式一种是通过传统的方式直接与Lmux 驱动交互,如,直接读写设备文件的数据.另外一种是Android特有的,就是通过HAL 模块.HAL 模块本质是通 ...
- Codeforces Round #285 (Div. 2)C. Misha and Forest（拓扑排序）
传送门 Description Let's define a forest as a non-directed acyclic graph (also without loops and parall ...
- Codeforces Round #410 (Div. 2)B. Mike and strings（暴力）
传送门 Description Mike has n strings s1, s2, ..., sn each consisting of lowercase English letters. In ...
- Java IO(3)
字符流相关 字符流基本上可以类比字节流 只不过是将字节流的byte 换为char. 最根本的两个类是Reader以及Writer Reader的子类有:BufferedReader, CharArra ...