代码实例：

<!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. php in_array()函数 语法

    php in_array()函数 语法 作用:搜索数组中是否存在指定的值.大理石机械构件价格 语法:in_array(search,array,type) 参数: 参数 描述 search 必需.规定 ...

  2. 学习日记2、easyui treeGrid属性及时间

    属性 该属性扩展自数据网格(datagrid),下面是为树形网格(treegrid)添加的属性. 名称 类型 描述 默认值 idField string 定义标识树节点的键名字段.必需. null t ...

  3. [CSP-S模拟测试]:Tree（贪心）

    题目描述 给定一颗$n$个点的树,树边带权,试求一个排列$P$,使下式的值最大 $$\sum \limits_{i=1}^{n-1}maxflow(P_i,P_{i+1})$$ 其中$maxflow( ...

  4. HDU4405 Aeroplane chess (概率DP,转移)

    http://acm.hdu.edu.cn/showproblem.php?pid=4405 题意:在一个1×n的格子上掷色子,从0点出发,掷了多少前进几步,同时有些格点直接相连,即若a,b相连,当落 ...

  5. 洛谷P1462 通往奥格瑞玛的道路（二分+spfa，二分+Dijkstra）

    洛谷P1462 通往奥格瑞玛的道路 二分费用. 用血量花费建图,用单源最短路判断 \(1\) 到 \(n\) 的最短路花费是否小于 \(b\) .二分时需要不断记录合法的 \(mid\) 值. 这里建 ...

  6. wget下载简单语法

    文章参考:https://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/wget.html nasa wget 下载: https://disc.gs ...

  7. apktool介绍

    apktool可以反编译出app的资源文件,apktool工具的下载路径:https://ibotpeaches.github.io/Apktool/ 下载后获取到一个jar文件,可以通过如下命令进行 ...

  8. 127、TensorFlow 计算图执行(二)

    import tensorflow as tf # Define a placeholder that expects a vector of three floating-point values ...

  9. 在windows上使用xdmcp登陆centos，红帽linux

    使用xdmcp协议可以方便的在远端登陆linux服务器,进行一些界面的操作. 修改服务器端配置. vi /etc/gdm/custom.conf 找到下面两个标签 [security] AllowRe ...

  10. STL之pair及其非成员函数make_pair()

    std::pair是一个结构模板,提供了一种将两个异构对象存储为一个单元的方法. 定义于头文件 <utility> template< class T1, class T2 > ...