HTML5之canvas4

来源：互联网发布：2k18艾佛森捏脸数据编辑：程序博客网时间：2024/06/05 07:04

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

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

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

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

varoImg = oGC.getImageData(0,0,100,100);

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

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

//alert(oImg.data.length ); //整体像素的数组集合

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

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

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

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

for(vari=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>

</body>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

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

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

varoImg = oGC.createImageData(100,100);

for(vari=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>

</body>

实例1：显示文字

<style>

body{

background:black;color:white;font-size:30px;

}

#c1{background:white;}

</style>

window.onload=function(){

varoC=document.getElementById("c1");

varoGc=oC.getContext("2d");

varoLi=document.getElementsByTagName("li");

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

oLi[i].onclick=function(){

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

var str=this.innerHTML;

var h=180;

oGc.font=h+"px impact";

oGc.textBaseline="top";

oGc.fillStyle="red";

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

console.log(oC.height-h);

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.putImageData(oImg,(oC.width - w)/2,(oC.height - h)/2);

// console.log(oC.height-h);

}

</script>

</head>

<body>

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

<ulstyle="float:left">

</ul>

</body>

实例2：像素显示文字10%

<style>

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

#c1{ background:white;}

</style>

window.onload = function(){

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

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

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

for(vari=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);

varnewImg = oGC.createImageData(w,h);

for(vari=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);

};

}

functionrandomArr(iAll,iNow){

var arr = [];

var newArr =[];

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

arr.push(i);

}

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

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

}

returnnewArr;

}

};

</script>

</head>

<body>

</ul>

</body>

实例3：像素显示文字动画

<style>

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

#c1{ background:white;}

</style>

window.onload = function(){

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

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

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

for(vari=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);

varnewImg = oGC.createImageData(w,h);

timer =setInterval(function(){

for(vari=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);

};

}

functionrandomArr(iAll,iNow){

var arr = [];

var allArr =[];

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

arr.push(i);

}

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

varnewArr = [];

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

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

}

allArr.push(newArr);

}

returnallArr;

}

};

</script>

</head>

<body>

</ul>

</body>

获取和设置具体坐标

<style>

body{

background:black;color:white;font-size:30px;

}

#c1{background:white;}

</style>

window.onload=function(){

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

varoGc=oC.getContext("2d");

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

varoImg=oGc.getImageData(0, 0, 100, 100);

//获取具体坐标（3.5）

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

//设置一行坐标

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){

varw=obj.width;

varh=obj.height;

vard=obj.data;

varcolor=[];

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>

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

</body>

<style>

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

#c1{background:white;}

</style>

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;

//反色获取到的像素值再用255减去

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>

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

</body>

当发现3D展现是一团黑的时候，在控制台如果看到“Unable to get image data from canvas because the canvas hasbeen tainted by cross-origin data.”的错误提示，这是因为浏览器的安全策略，“同源策略”。浏览器为了阻止欺骗，会追踪 image data。当你把一个“跟canvas的域不同的”图片放到canvas上，这个canvas就成为“tainted”(被污染的，脏的)，浏览器就不让你操作该canvas的任何像素。

这个问题有两种解决方案

方案一：有服务器环境，将项目部署在web服务器上，最简单的tomcat。

方案二：设置浏览器
On Windows：

Chrome:
1、得到Chrome的安装路径，例如：‘C:\Users\-your-user-name\AppData\Local\Google\Chrome\Application>’
2、在命令行窗口，输入安装路径，加上–allow-file-access-from-files参数，例如：‘C:\Users\your-user-name\AppData\Local\Google\Chrome\Application>\chrome.exe–allow-file-access-from-files’，回车执行，启动Chrome
3、测试的一个临时方法:：复制一个Chrome的快捷方式，右键》属性》目标的文本框中加上参数–allow-file-access-from-files，例如：”C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”–allow-file-access-from-files

Firefox，IE：默认可以加载本地图片

OnMac：

Chrome：从命令行窗口中启动，启动命令为open /Applications/Google\ Chrome.app –args–allow-file-access-from-files

Safari：
1、Safari》偏好设置》高级》勾选“在菜单栏中显示‘开发’菜单”
2、开发》勾选“启用WebGL”
3、开发》勾选“停用本地文件限制”

Firefox：默认可以加载图

反色倒影效果

修改两个地方

<style>

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

#c1{background:white;}

</style>

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);

//反色获取到的像素值再用255减去

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>

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

</body>

变色加倒影加渐变

修改

result[3] = 255;

变成：

Result[3]=255*i/h;

<style>

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

#c1{background:white;}

</style>

window.onload =function(){

varoC = document.getElementById('c1');

varoGC = oC.getContext('2d');

varyImg = new Image();

yImg.onload= function(){

draw(this);

};

yImg.src= '2.jpg';

functiondraw(obj){

oC.width= obj.width;

oC.height = obj.height*2;

oGC.drawImage(obj,0,0);

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

varw = oImg.width;

varh = oImg.height;

varnum = 5;

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

//得到格子

varstepW = w/num;

varstepH = h/num;

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

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

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

//设置小方块中的颜色

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

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

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

}

oGC.putImageData(newImg,0,obj.height);

}

functiongetXY(obj,x,y){ //针对一行一列进行操作

varw = obj.width;

varh = obj.height;

vard = obj.data;

varcolor = [];

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>

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

</body>

0 0