<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{
var oc = document.getElementById('c1');
var ogc = oc.getContext('2d'); var yimg = new Image();
yimg.onload = function ()
{
draw(this);
}
yimg.src = 'img/5-5.jpg'; function draw(obj)
{
oc.width = obj.width;
oc.height = obj.height*2; ogc.drawImage(obj,0,0);
var oimg = ogc.getImageData(0,0,obj.width,obj.height);
var w = oimg.width;
var h = oimg.height; var newimg = ogc.createImageData(obj.width,obj.height);
for(var i = 0; i < h; i++)
{
for(var j = 0; j < w; j++)
{
var color = getXY(oimg,j,i)
var result = [];
result[0] = 255 - color[0];
result[1] = 255 - color[1];
result[2] = 255 - color[2];
result[3] = 255*i/h; setXY(newimg,j,h-i,result);
}
} ogc.putImageData(newimg,0,obj.height);
} function getXY(obj,x,y)
{
var w = obj.width;
var h = obj.height;
var d = obj.data; var color = []; color[0] = d[ 4*(y*w+x)];
color[1] = d[ 4*(y*w+x) +1];
color[2] = d[ 4*(y*w+x) +2];
color[3] = d[ 4*(y*w+x) +3]; return color;
} function setXY(obj,x,y,color)
{
var w = obj.width;
var h = obj.height;
var d = obj.data; d[ 4*(y*w+x)] = color[0];
d[ 4*(y*w+x) +1] = color[1];
d[ 4*(y*w+x) +2] = color[2];
d[ 4*(y*w+x) +3] = color[3]; }
}
</script>
<style>
body{
background:pink;
}
#c1{
background:white;
}
</style>
</head> <body>
<canvas id="c1" width="400" height="800"></canvas>
</body>
</html>

html5 canvas图片渐变的更多相关文章

  1. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  2. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  3. html5 canvas 径向渐变2

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

  4. html5 canvas 径向渐变

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

  5. html5 canvas 对角线渐变

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

  6. html5 canvas 垂直渐变描边

    <!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 ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. UML类图几种关系的总结,泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖

    在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Association),聚合(Aggregation),组合(Compositi ...

  2. cocos2dx Android 环境搭建 以及 ndk调试

    最近在学习cocos2dx,真的很强大,使我们更专注于游戏趣味,免去了繁琐的底层框架代码. cocos2dx的最强大之处当然在于跨平台.跨平台首选当然是Android,好记性不如烂笔头,记下本文分享给 ...

  3. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  4. Qt之QProgressIndicator(等待提示框)

    简述 很早以前在网上看到一个纯代码实现的旋转动画感觉效果很不错,分享给大家.不得不说,条条大道通罗马,我们需要更多地创造... 详见:QProgressIndicator 简述 效果 源码 使用 更多 ...

  5. I.MX6 AT24Cxx eeprom Linux i2c-gpio

    /************************************************************************** * I.MX6 AT24Cxx eeprom L ...

  6. php的session_start

    如果session使用cookie记录,那么在session_start时会设置一个cookie,参数取决于php.ini的设置,当然也可以通过session_set_param在程序里设置.不同站点 ...

  7. UVa10603 Fill

    解题思路:这是神奇的一题,一定要好好体会.见代码: #include<cstdio> #include<cstring> #include<algorithm> # ...

  8. location.orgin

    location.orgin 在chrome浏览器下,属性返回的是: 协议(http:).域名.端口(www.cnblogs.com).例如访问http://www.cnblogs.com/,那返回的 ...

  9. php 文件file常用的操作

    多是代码形式呈现,更多的信息可以查看php api文档,搜索Filesystem; //创建文件夹 $path_find = AppRoot . '/Temp/excel_curl'; //查找的路径 ...

  10. Android下EditText的hint的一种显示效果------FloatLabelLayout

    效果: 此为EditText的一种细节,平时可能用的不多,但是用户体验蛮好的,特别是当注册页面的项目很多的时候,加上这种效果,体验更好 仅以此记录,仅供学习参考. 参考地址:https://gist. ...