h5-8 canvas
<!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的更多相关文章
- h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
- 关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
- 关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
- 用H5的canvas做时钟
<!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...
- H5 认识canvas
不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...
- H5标签-canvas实现颜色拾取功能
HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...
- H5之canvas简单入门
<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...
- H5的canvas绘图技术
canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...
随机推荐
- CSS中的五大字体家族（cursive 手写字体族更吸引我）
这是CSS中的五大字体家族. serifserif 中文翻译为“衬线字体族”.serif 具有末端加粗.扩张或尖细末端,或以实际的衬线结尾的一类字体.可以看出 serif 总是在文字末端做文章,这样做 ...
- Quartz 表达式的学习
只记录用到过的,不全面 Quartz版本:quartz-all-1.6.0.jar 先看图 其他示例: 0 5,6,13 * * ? 意义:每日5:00,6:00,13:00 被触发 0 10,30 ...
- SQLServer2008 关于Having
转自百度百科 与where 相比 HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 子句和 SELECT 语句交互的方式类似. WHERE 子句搜索条件在进行分组操作之前应用: ...
- Javascrpt核心概念（2）--操作符
学习操作符这个章节最好回忆一下C里的惯例,因为ECMAScript的标准很多继承自C的语法 一元操作符 只能操作一个值得操作符 递增和递减操作符 var age = 29; ++age; //30 v ...
- JavaScript 原型和引用趣点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- HTML+CSS（11）
n CSS背景属性 Background-color:背景色. Background-image:背景图片地址.如:background-image:url(images/bg.gif;) Back ...
- buf.readInt32LE函数详解
offset {Number} 0 noAssert {Boolean} 默认:false 返回:{Number} 从该 Buffer 指定的带有特定尾数格式(readInt32BE() 返回一个较大 ...
- 【Linux】磁盘分区
我们在Linux操作过程中,可能会遇到磁盘分区的问题.这篇文章是对/dev/sdb 这块磁盘进行分区. linux分区不同于windows,linux下硬盘设备名为(IDE硬盘为hdx(x为从a—d) ...
- 复习java基础第六天（IO）
一:File 类 • 输入:读取外部数据(磁盘.光盘等存储设备的数据)到程序(内存)中. • 输出:将程序(内存)数据输出到磁盘.光盘等存储设备中 • Java 的 IO 流主要包括输入.输出两种 ...
- dubbo之泛化实现
实现泛化调用 泛化接口调用方式主要用于客户端没有 API 接口及模型类元的情况,参数及返回值中的所有 POJO 均用 Map 表示,通常用于框架集成,比如:实现一个通用的服务测试框架,可通过 Gene ...