<!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. Android HTTPS(5)SSL测试工具

    Nogotofail: A Network Traffic Security Testing Tool Nogotofail is a tool gives you an easy way to co ...

  2. php关于static关键字

    静态属性与方法可以在不实例化类的情况下调用,直接使用类名::方法名的方式进行调用.静态属性不允许对象使用->操作符调用.静态方法中,$this伪变量不允许使用.可以使用self,parent,s ...

  3. cut命令如何截取以空格隔开的字段

    你的文件分隔符恐怕不止一个空格(一定的who生成的): 用awk: awk '{print $2}' file 一定要用cut的话: cat file|tr -s ' '|cut -d' ' -f2 ...

  4. CSS的display属性

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

  5. 为laravel5.1生产环境linux从源代码安装PHP

    laravel5.1正式发布,该版本号称是第一个LTS的版本,它对环境的要求也比较高,至少要PHP5.59以上. 现在网上找了很久,只能自己从头安装新版本的PHP yum install libmcr ...

  6. git remotes

    简单地说,一个remote repository是一个非本地的repo.它可以是在你公司网络上的另外一个git repo,也可以是在internet上,甚至在你本地文件系统中的一个repo,关键点是它 ...

  7. 51nod1354 选数字

    01背包tle. 解题报告(by System Message) 类似于背包的DP,以乘积为状态.先把等选数字里面不是K约数的去掉.然后找出K的约数,进行离散化.然后dp[i][j]表示前i个数字乘积 ...

  8. Linux删除文件后空间没有释放

    .COMMAND默认以9个字符长度显示的命令名称.可使用+c参数指定显示的宽度,若+c后跟的参数为零,则显示命令的全名.PID:进程的ID号.PPID父进程的IP号,默认不显示,当使用-R参数可打开. ...

  9. codevs 1138 聪明的质监员

    二分+前缀和. #include<iostream> #include<cstdio> #include<cstring> #include<cmath> ...

  10. JDK,JRE,JVM区别与联系-理解与概括

    我们利用JDK(调用JAVA API)开发了属于我们自己的JAVA程序后,通过JDK中的编译程序(javac)将我们的文本java文件编译成JAVA字节码,在JRE上运行这些JAVA字节码,JVM解析 ...