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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.fillRect(0,0,100,100);//绘制黑色方块

    var oImg = oGC.getImageData(0,0,100,100);//获取图像的像素

    alert( oImg.width );  //一行的像素个数100

    alert( oImg.height );  //一列的像素个数100

    alert( oImg.data.length );  //整体像素的数组集合40000，每个像素占4个位置。

    alert( oImg.data[0] );  //0 - 255 黑色到白色 0

    alert( oImg.data[1] );  //0 - 255 黑色到白色 0

    alert( oImg.data[2] );  //0 - 255 黑色到白色 0

    alert( oImg.data[3] );  //0 - 255 透明到不透明 255

    for(var i=0;i<oImg.width*oImg.height;i++){

        oImg.data[4*i] = 255;

        oImg.data[4*i+1] = 0;

        oImg.data[4*i+2] = 0;

        oImg.data[4*i+3] = 100;

    }

    oGC.putImageData(oImg,100,100);//设置新的像素数据

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var oImg = oGC.createImageData(100,100);

    for(var i=0;i<oImg.width*oImg.height;i++){

        oImg.data[4*i] = 255;

        oImg.data[4*i+1] = 0;

        oImg.data[4*i+2] = 0;

        oImg.data[4*i+3] = 100;

    }

    oGC.putImageData(oImg,100,100);//创建新的像素集合

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black; color:white; font-size:30px;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var aLi = document.getElementsByTagName('li');

    for(var i=0;i<aLi.length;i++){

        aLi[i].onclick = function(){

            var str = this.innerHTML;

            var h = 180;

            oGC.clearRect(0,0,oC.width,oC.height);

            oGC.font = h + 'px impact';

            oGC.textBaseline = 'top';

            oGC.fillStyle = 'red';

            var w = oGC.measureText(str).width;

            oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2);

            var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h);

            oGC.clearRect(0,0,oC.width,oC.height);

            var arr = randomArr(w*h,w*h/10);

            var newImg = oGC.createImageData(w,h);

            for(var i=0;i<arr.length;i++){

                newImg.data[4*arr[i]] = oImg.data[4*arr[i]];

                newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1];

                newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2];

                newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3];

            }

            oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2);

        };

    }

    function randomArr(iAll,iNow){

        var arr = [];

        var newArr = [];

        for(var i=0;i<iAll;i++){

            arr.push(i);

        }

        for(var i=0;i<iNow;i++){

            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );

        }

        return newArr;

    }

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<ul style="float:left;">

    <li>妙</li>

    <li>味</li>

    <li>课</li>

    <li>堂</li>

</ul>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black; color:white; font-size:30px;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var aLi = document.getElementsByTagName('li');

    for(var i=0;i<aLi.length;i++){

        aLi[i].onclick = function(){

            var str = this.innerHTML;

            var h = 180;

            var timer = null;

            clearInterval(timer);

            var iNow = 0;

            oGC.clearRect(0,0,oC.width,oC.height);

            oGC.font = h + 'px impact';

            oGC.textBaseline = 'top';

            oGC.fillStyle = 'red';

            var w = oGC.measureText(str).width;

            oGC.fillText(str,(oC.width - w)/2,(oC.height - h)/2);

            var oImg = oGC.getImageData((oC.width - w)/2,(oC.height - h)/2,w,h);

            oGC.clearRect(0,0,oC.width,oC.height);

            var arr = randomArr(w*h,w*h/10);

            var newImg = oGC.createImageData(w,h);

            timer = setInterval(function(){

                for(var i=0;i<arr[iNow].length;i++){

                    newImg.data[4*arr[iNow][i]] = oImg.data[4*arr[iNow][i]];

                    newImg.data[4*arr[iNow][i]+1] = oImg.data[4*arr[iNow][i]+1];

                    newImg.data[4*arr[iNow][i]+2] = oImg.data[4*arr[iNow][i]+2];

                    newImg.data[4*arr[iNow][i]+3] = oImg.data[4*arr[iNow][i]+3];

                }

                oGC.putImageData(newImg,(oC.width - w)/2,(oC.height - h)/2);

                if(iNow == 9){

                    iNow = 0;

                    clearInterval(timer);

                }

                else{

                    iNow++;

                }

            },200);

        };

    }

    function randomArr(iAll,iNow){

        var arr = [];

        var allArr = [];

        for(var i=0;i<iAll;i++){

            arr.push(i);

        }

        for(var j=0;j<iAll/iNow;j++){

            var newArr = [];

            for(var i=0;i<iNow;i++){

                newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );

            }

            allArr.push(newArr);

        }

        return allArr;

    }

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<ul style="float:left;">

    <li>妙</li>

    <li>味</li>

    <li>课</li>

    <li>堂</li>

</ul>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black; color:white; font-size:30px;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.fillRect(0,0,100,100);

    var oImg = oGC.getImageData(0,0,100,100);

    alert( getXY(oImg,3,5) );

    setXY( oImg,3,5,[255,0,0,255] );

    for(var i=0;i<oImg.width;i++){

        setXY( oImg,i,5,[255,0,0,255] );

    }

    oGC.putImageData(oImg,100,100);

    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>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black; color:white; font-size:30px;}

#c1{ background:white;}

</style>

<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 = '2.png';

    function draw(obj){

        oC.width = obj.width;

        oGC.drawImage(obj,0,0);

        var oImg = oGC.getImageData(0,0,obj.width,obj.height);

        var w = oImg.width;

        var h = oImg.height;

        for(var i=0;i<h;i++){

            for(var j=0;j<w;j++){

                var result = [];

                var color = getXY(oImg,j,i);

                result[0] = 255 - color[0];//反色

                result[1] = 255 - color[1];

                result[2] = 255 - color[2];

                result[3] = 255;

                setXY(oImg,j,i,result);

            }

        }

        oGC.putImageData(oImg,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>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black; color:white; font-size:30px;}

#c1{ background:white;}

</style>

<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 = '2.png';

    function draw(obj){

        oC.width = obj.width;

        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 result = [];

                var color = getXY(oImg,j,i);

                result[0] = 255 - color[0];

                result[1] = 255 - color[1];

                result[2] = 255 - color[2];

                result[3] = 255;

                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>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black; color:white; font-size:30px;}

#c1{ background:white;}

</style>

<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 = '2.png';

    function draw(obj){

        oC.width = obj.width;

        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 result = [];

                var color = getXY(oImg,j,i);

                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>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black; color:white; font-size:30px;}

#c1{ background:white;}

</style>

<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 = '2.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 num = 5;

        var newImg = oGC.createImageData(obj.width,obj.height);

        var stepW = w/num;

        var stepH = h/num;

        for(var i=0;i<stepH;i++){

            for(var j=0;j<stepW;j++){

                var color = getXY(oImg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));

                for(var k=0;k<num;k++){

                    for(var l=0;l<num;l++){

                        setXY(newImg,j*num+l,i*num+k,color);

                    }

                }

            }

        }

        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>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

h5-8 canvas的更多相关文章

  1. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  2. 关于h5绘制canvas生成图片的注意点！

    1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...

  3. 关于H5的Canvas

    1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...

  4. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  5. H5使用Canvas绘图

    一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...

  6. 用H5的canvas做时钟

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

  7. H5 认识canvas

    不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...

  8. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  9. H5之canvas简单入门

    <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...

  10. H5的canvas绘图技术

    canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

随机推荐

  1. facade 模式和gateway模式的区别

    原文:http://stackoverflow.com/questions/4422211/what-is-the-difference-between-facade-and-gateway-desi ...

  2. Android Studio and Gradle安装心得

    安装基于Eclipse 的ADT一段时间,感觉确实有很多功能不足,通过网上资料,决定改向AS. AS下载了最新的2.3版本,它不分64位与32位,网上说有单独版是瞎扯蛋.只要启动不同的EXE就行了. ...

  3. oracle-3种工具使用

    1:原命令行,dos 2:sqlplus,图形界面 3:isqlplus,网页版的.(假如自己机器无法安装oracle,可通过别人ip地址去使用oracle,http://ip:5560/isqlpl ...

  4. SAP computer之input and MAR

    Input and MAR Below the program counter is the input and MAR block. It includes the address and data ...

  5. css基础四

    过渡属性 下面的表格列出了所有的转换属性: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS ...

  6. spring cloud(五) hystrix

    开启feign 熔断 hystrix    整合hystrix-dashboard监控面板 1. 服务调用者boot工程 pom引入依赖 <!-- hystrix-dashboard 监控依赖 ...

  7. 【剑指Offer】21、栈的压入、弹出序列

      题目描述:   输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2 ...

  8. [Ynoi2016]掉进兔子洞 题解

    题面传送门:https://www.luogu.org/problemnew/show/P4688 (温馨提示,请直接翻至题目描述部分) 1e5的数据范围,以及对区间每个权值出现次数取min此类主席树 ...

  9. 洛谷 P1059 明明的随机数

    题目描述 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了NNN个111到100010001000之间的随机整数(N≤100)(N≤100)(N≤100),对于其中重复 ...

  10. php如何判断SQL语句的查询结果是否为空？

    PHP与mysql这对黄金搭档配合的相当默契,但偶尔也会遇到一些小需求不知道该怎么做,例如今天要谈到的:如何判断sql语句查询的结果集是否为空! 我们以查询学生信息为例,来看看究竟如何实现我们的需求. ...