代码实例：

<!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. LDD3 第15章 内存映射和DMA

    本章内容分为三个部分: 第一部分讲述了mmap系统调用的实现过程.将设备内存直接映射到用户进程的地址空间,尽管不是所有设备都需要,但是能显著的提高设备性能. 如何跨越边界直接访问用户空间的内存页,一些 ...

  2. Vue的思考扩展

    1.Vue是如何实现数据双向绑定的 1.1.实现双向绑定的基本原理 数据驱动:Vue会通过Dircetives指令,对DOM做一层封装,当数据发生改变会通知指令去修改对应的DOM,数据驱动DOM变化, ...

  3. windows下使用Ant编译Android项目

    1. 安装ant,配置环境变量 2. 执行命令: android update project -p 项目路径 例:android update project -p D:\project\UI_de ...

  4. python 文件读写操作打开模式

    ‘r’:只读.该文件必须已存在. ‘r+’:可读可写.该文件必须已存在,写为追加在文件内容末尾. ‘rb’:表示以二进制方式读取文件.该文件必须已存在. ‘w’:只写.打开即默认创建一个新文件,如果文 ...

  5. datagrid选择一行

    onLoadSuccess:function(value, rec){ $("#sinopec_search_btn").linkbutton('enable'); var dat ...

  6. php面试专题---13、AJAX基础内容考点

    php面试专题---13.AJAX基础内容考点 一.总结 一句话总结: ajax对提升用户速度,缓解服务器压力方面也是很有可取之处的,毕竟传递的数据少了 1.AJAX基础概念? Asynchronou ...

  7. codecs模块, decode、encode

    使用codecs模块,在Python中完成字符编码   字符的编码是按照某种规则在单字节字符和多字节字符之间进行转换的某种方法.从单字节到多字节叫做decoding,从多字节到单字节叫做encodin ...

  8. Nginx 官网文档翻译汇总

    Nginx 官网文档,各个模块的手册在这里. Nginx 中文文档 - 淘宝翻译 改版后的新 Nginx 官网文档 概述 新手指南 控制 Nginx 管理员指南 Admin Guide 安装 基本功能 ...

  9. 机器学习实战笔记-10-K均值聚类

    K-均值聚类 优点:易实现.缺点:可能收敛到局部最小值,大规模数据集上收敛较慢:适用于数值型数据. K-均值聚类(找到给定数据集的k个簇) 算法流程 伪代码: 创建k个点作为起始质心(经常是随机选择) ...

  10. MySQL点滴记录

    1.查询所用引擎 show engines;