代码实例：

<!DOCTYPE html>

<html>

	<head>

		<style>

		canvas{

		background:#eee;

		}

		</style>

		<title>noTitle</title>

		<meta charset="">

		<link rel="stylesheet" href="">

		<script>

			window.onload=function  () {

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

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

              var imgData=cobj.createImageData(100,100);

				cobj.putImageData(Gradient(imgData,[255,0,0,255],[0,255,0,255]),0,0);

			}

			function Gradient (imgData,colorArr1,colorArr2) {

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

			     imgData.data[i*4+0]=colorArr1[0]+(i/(imgData.width*imgData.height))*(colorArr2[0]-colorArr1[0]);

				 imgData.data[i*4+1]=colorArr1[1]+(i/(imgData.width*imgData.height))*(colorArr2[1]-colorArr1[1]);

				 imgData.data[i*4+2]=colorArr1[2]+(i/(imgData.width*imgData.height))*(colorArr2[2]-colorArr1[2]);

				 imgData.data[i*4+3]=colorArr1[3]+(i/(imgData.width*imgData.height))*(colorArr2[3]-colorArr1[3]);

			   }

			   return imgData;

			}

		</script>

	</head>

	<body>

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

		</canvas>

	</body>

</html>

　　效果：

2017-09-12  10:13:33

html5 像素模拟渐变的更多相关文章

  1. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  2. HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient

    今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...

  3. [读码]HTML5像素文字爆炸重组

    [边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...

  4. HTML5阴影与渐变

    一.阴影 阴影的效果,阴影有四个状态值控制,分别是shadowBlur,shadowOffsetX,shadowOffsetY和shadowColor.shadowBlur为阴影的像素模糊值,shad ...

  5. 2020年HTML5考试模拟题整理（一）

    1.哪个元素被称为媒体元素的子元素? 答案:<track>. <track> 标签为媒体元素(比如 <audio> and <video>)规定外部文本 ...

  6. html5 canvas 径向渐变2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html5 canvas 径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html5 canvas 对角线渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. html5 canvas 垂直渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. python 全栈开发，Day9(函数的初始，返回值，传参，三元运算)

    一.函数的初始 比如python没有len()方法,如果求字符串的长度 使用for循环 s = 'asdfadsf' count = 0 for i in s: count += 1 print(co ...

  2. Android中对Apk加固(加壳)续篇之---对Native层(so文件)进行加固

    有人说Android程序用Java代码写的,再怎么弄都是不安全的,很容易破解的,现在晚上关于应用加固的技术也很多了,当然这些也可以用于商业发展的,梆梆加密和爱加密就是很好的例子,当然这两家加固的Apk ...

  3. 【HDOJ6666】Quailty and CCPC（模拟）

    题意:给出罚时现场赛的题数和罚时,问是否有在金牌线下取整被卡出,四舍五入卡入的队伍 n<=1e5 思路: #include<bits/stdc++.h> using namespac ...

  4. Linux CentOS7 安装docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口 ...

  5. Codeforces Round #585 (Div. 2) E. Marbles （状压DP）

    题目:https://codeforc.es/contest/1215/problem/E 题意:给你一个序列,你可以交换相邻的两个数,要达到一个要求,所有相同的数都相邻,问你交换次数最少是多少 思路 ...

  6. MYSQL之union和order by分析([Err] 1221 - Incorrect usage of UNION and ORDER BY)

    我在一个业务中采用了按月的分表策略,当查询的条件跨月的时候,使用了union all汇总2个表的数据,并按插入时间倒序排列.查询并不复杂,但是当执行的时候却报错了. SELECT * FROM `ta ...

  7. ''.startswith() and ''.endswith() instead of string slicing to check for prefixes or suffixes.

    w http://legacy.python.org/dev/peps/pep-0008/ Yes: if foo.startswith('bar'):No:  if foo[:3] == 'bar' ...

  8. 测开之路六十二：接口测试平台之公共的js、html、平台入口

    common.js //定义后台的host和端口var host = 'http://192.168.xxx.1:8000'; //'http://127.0.0.1:8000'; //用于发送htt ...

  9. LinkedList 源码解读

    LinkedList 源码解读 基于jdk1.7.0_80 public class LinkedList<E> extends AbstractSequentialList<E&g ...

  10. Linux 文件和目录的权限设置 - umask（默认权限），chmod（改变权限）

    1. chmod 改变已有目录或文件的权限 chmod 设置已有目录或文件的权限.可以为指定范围的用户添加或删除权限. 权限范围的表示法如下: u:User,即文件或目录的拥有者: g:Group,即 ...