h5-8 canvas
2016-04-06 13:18
405 查看
<!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-7 canvas
- h5-6 canvas
- h5-5 canvas
- h5-4 canvas
- h5-3
- HTML4 和 HTML5 的10个关键区别
- H5 localStorge
- HTML5 文件操作API
- h5-2
- HTML5-新特性
- html5拖拉
- h5 -1
- HTML5+CSS3 loading 效果收集－－转载
- 2016年最火的15款HTML5游戏引擎
- 非常优秀的8个HTML5前端框架
- ajax与HTML5 history pushState/replaceState实例
- Web开发者不容错过的10个HTML5工具
- 设计师必看的10个HTML5动画工具
- HTML5游戏实战之拼图游戏（包含关卡）
- 客户端存储之HTML5 web存储