代码实例：

<!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. 图片没有.png或者jpg后缀能不能加载？

    是可以的,如:http://mmbiz.qpic.cn/mmbiz_png/MW1VecOrnw6HUMvEUNUxibLVtbY2vHF8QkFyviaickh8pnsapQ8gOosdq13SBX ...

  2. Centos7网卡绑定的两种方法

    https://blog.51cto.com/youdong/1963416 选择模式4,并且layer选择3+4,交换机要配置LAG 一．传统的bond方式 (1)bond几种主要模式介绍 ü mo ...

  3. elasticsearch6.8.1 x-pack插件破解

    一.为什么要破解x-pack?       因为涉及到了ES服务的安全性.ES服务如果被劫持,数据直接会被删除.ES登录账号和密码的设置是通过x-pack来实现的,官方只给了免费的30天的使用权,而且 ...

  4. Linux下安装Tomcat(2)

    Tomcat是一个免费的开源的Serlvet容器,它是Apache基金会的Jakarta项目中的一个核心项目,由Apache,Sun和 其它一些公司及个人共同开发而成.由于有了Sun的参与和支持,最新 ...

  5. 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...

  6. CSS-同一行的元素高度统一

    一:flex 大法 步骤 设置外部容器 display: flex; 设置内部容器 align-items: stretch; 原理 https://developer.mozilla.org/zh- ...

  7. CSS-格式化上下文（Formatting Context）

    Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 块级格式化上下文,它是指一个独立的块级渲染区域, ...

  8. 关于Vue+iview的前端简单的导入数据（excel）

    前一段时间项目经历了纯前端处理导入excel文件并处理等问题,数据量大的时候时间上长的一比,三千条数据需要三四秒甚至更长,不管产品咋想的,具体做法为: 首先下载一个这玩意: 进行简单封装一下: < ...

  9. go tour - Go 入门实验教程

    在线实验地址 - 官网 在线实验地址 - 国内 可以将官方教程作为独立程序在本地安装使用,这样无需访问互联网就能运行,且速度更快,因为是在你的机器上构建并运行代码示例. 本地运行此教程的中文版的步骤如 ...

  10. memcpy复制字符串的注意事项/memcpy不能用来拷贝类类型

    strcpy复制src到dst,最后将dst的下一个位置置为'\0',所以dst是以'\0'结尾的字符串 ] = "abcde"; cout << c1 << ...