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 ...
随机推荐
- Cloudera Manager安装之利用parcels方式（在线或离线）安装单节点集群（包含最新稳定版本或指定版本的安装）（添加服务）（Ubuntu14.04）（四）
.. 欢迎大家,加入我的微信公众号:大数据躺过的坑 免费给分享 同时,大家可以关注我的个人博客: http://www.cnblogs.com/zlslch/ 和 http ...
- Android使用NDK---函数参数传递-基本类型和数组
参考链接:http://www.cnblogs.com/luxiaofeng54/archive/2011/08/19/2145486.html 数据传输可分为 基本数据类型传输 和 引用数据类型的传 ...
- Mac下php连接mysql数据库失败解决办法
通过phpmyadmin连接mysql成功,但是通过php连接数据库失败,执行如下php语句 ? 1 @mysql_connect("localhost","root&q ...
- POJ_1061_扩展欧几里德
青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 107027 Accepted: 21321 Descript ...
- 将 GNOME 默认的界面切换动画功能关闭
gsettings set org.gnome.desktop.interface enable-animations false
- localStorage、sessionStorage、cookie
vue下的全局变量和vuex里的state都是临时变量,页面刷新就都没了.
- EF6 mysql配置
如何把一个ef项目 从sqlserver改为mysql 首先在引入了ef的层再引入这两个包,注意两个的版本一定要一样,一定要一样,一定要一样,不然就会报错 MySql.Data.Entity目前的最新 ...
- STM32F103 rtthread工程构建
目录 STM32F103 工程构建 1.基本情况 2.硬件连接 3.rtthread配置 4.点灯 5. 码云上git操作 STM32F103 工程构建 1.基本情况 RAM 20K ROM 64K ...
- noip模板复习
自己敲模板还是有很多容易错的地方 写在注释里面了 LCA #include<bits/stdc++.h> #define REP(i, a, b) for(register int i = ...
- 手动修改ARM Linux的静态IP和用QT获取和修改IP
.vi /etc/network/interfaces # 找到“# Wired or wireless interfaces” .注释掉 iface eth0 inet dhcp 这是自动获取ip地 ...