<!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. XML Schema使用技巧——unique

    XML Schema使用技巧——unique   XML Scheam允许指定某个元素或属性的值在一定得范围内是唯一的.为了指定元素或属性值的唯一性,可以使用<xs:unqiue>元素,使 ...

  2. 浅析JavaScript函数的参数

    ECAMScript函数不介意传递进来多少个参数,也不介意传递的参数的类型,即使定义的函数只接受两个参数,当调用该函数时没有传递参数,甚至传递了三个参数等等都无所谓,这是因为在ECAMScript中参 ...

  3. CI在CentOS中的部署与实践LNMP

    1. 平台:lnmp CentOS6.4 (64bit) nginx1.2.4+php5.5.7配置过程中遇到的问题与处理方式: 1. 404错误: 原因:nginx中的配置请求路径的问题 2. 40 ...

  4. Python [Leetcode 345]Reverse Vowels of a String

    题目描述: Write a function that takes a string as input and reverse only the vowels of a string. Example ...

  5. 【django】django学得好迷茫啊 来个学习规划吧

    http://www.zhihu.com/question/26235428

  6. 用Python抓网页的注意事项

    用Python编一个抓网页的程序是非常快的,下面就是一个例子: import urllib2 html = urllib2.urlopen('http://blog.raphaelzhang.com' ...

  7. Linux下tail命令

    简述 tail命令从指定点开始将文件写到标准输出,使用tail命令的“-f”选项可以方便的查阅正在改变的日志文件,“tail -f filename”会把filename里最尾部的内容显示在屏幕上,并 ...

  8. Vagrant使用笔记

    vagrant box add [options] <name, url, or path> - 添加box至vagrant的管理列表 vagrant init 初始化虚拟机至当前文件夹并 ...

  9. RAC 之 RMAN 恢复

    RAC 下的RMAN 讲究的是备份和还原的策略要一致.备份策略的不同,会导致备份结果的分步不同,进而影响恢复的策略和步骤.一般情况下,恢复策略和备份策略必须是对应的.如果备份策略进行了修改,那么恢复也 ...

  10. Android数据库一些源码分析

    对于批量数据插入这种最常见的情况来说,我们来看两种实现方式(两种都用了事务). 下面这种应该是最多人使用的插入数据的方法: public long addByExec(List<Person&g ...