代码实例：

<!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 csv导出数据 （二）

    全部导出和时间导出 html代码,全程并不需要引用什么插件 <include file="public@header"/> <link href="__ ...

  2. EZOJ #386 最小生成树

    分析 先建出最小生成树 之后每次倍增找环即可 代码 #include<bits/stdc++.h> using namespace std; #define int long long s ...

  3. day18—Flex弹性布局详解（二）

    转行学开发,代码100天——2018-04-03 2.6 align-content属性 align-content 属性定义了在交叉轴方向对齐方式和额外空间分配,类似于justify-content ...

  4. delphi 牛逼 了 app （已在软件界掀起波澜）10分钟10行代码做出让人惊叹的程序

    (已在软件界掀起波澜)10分钟10行代码做出让人惊叹的程序 http://v.qq.com/x/page/m0328h73bs7.html?ptag=bbs_csdn_net

  5. 【Unity知识点】安卓游戏如何在切后台后继续运行

    解决方法很简单,在android项目AndroidManifest.xml文件中的activity中添加如下内容: android:configChanges="fontScale|keyb ...

  6. JavaScript搜索框响应事件

    HTML页面,注意:不要使用form标签 <input type = "text" name="keyword" id="keyword&quo ...

  7. 004--PowerDesigner设置显示1对多等关系

    PowerDesigner设置显示1对多等关系 Step1:双击Reference连接线 Step2:设置Cardinality Step3:显示Cardinality Tools->Displ ...

  8. jmeter 把返回数据写到文件

    jmeter如何把返回数据写入到文件 作者:WhoisTester    2015-10-20 20:11 1. 首先我们可以使用 regular expression extractor 正则表达式 ...

  9. CentOS7没有ifconfig/route/arp/netstat等命令的解决方案

    查看提供 ifconfig 命令的包 [root@bogon ~]# yum search ifconfig 这里选择安装net-tools包即可 [root@bogon ~]# yum instal ...

  10. Manacher（最长回文串）

    http://acm.hdu.edu.cn/showproblem.php?pid=3068 最长回文 Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符 ...