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 ...
随机推荐
- 关于sizeof（）、size（）的有些问题
#include<iostream>using namespace std; int main() { char a[] = "abcdefg"; string s = ...
- 《CSS Mastery》读书笔记（4）
第七章 布局 CSS得到一个不好的名声,比较难懂, 一方面由于浏览器的不兼容,另一方面由于网上大量的技巧,每个CSS作者都可以有自己的方法去创建多列布局, 新的CSS开发者只是使用一种方法而不去理 ...
- 删除django
1.命令行运行python 2.import django3.print(django.__path__)4.删除django目录即可
- dhtmlxtree动态加载节点数据的小随笔
最近做了一个这个东西,颇有些感触,随笔记录一下自己的过程. 首先特别感谢:https://blog.csdn.net/cfl20121314/article/details/46852591,对我的帮 ...
- jquery Contains 实现查询
var filter = $(this).val(); var filterResult = $(this).find('h2:Contains(' + filter + ')'); if (filt ...
- 无需编写代码，API业务流程测试，零代码实现
引言 除了测试单个接口,我们常常需要对多个有数据或者逻辑关联的接口进行业务流程测试,例如获取验证码-注册-登录.传统测试业务流程需要编写一系列测试代码,现在通过eoLinker全UI界面,无需编写任何 ...
- 图的BFS
目录: 一.算法的基本思路 二.算法过程 三.题目:785判断是否为二分图 https://blog.csdn.net/weixin_40953222/article/details/80544928 ...
- leetcode 188-maxProfit
public static int maxProfit(int k, int[] prices) { if (0 >= k || null == prices || 1 >= prices ...
- 关于虚拟机中克隆的linux为什么不能开启网络服务
将centos克隆了一份,启动后并配置好文件,发现网络服务中只有lo(loopback),而网卡(eth0)没有启动,一开始以为是通信模式(bridged,NAT,host-only)的选择问题,最后 ...
- <a>标签中的href伪协议 标签： html 2016-12-24 22:38 365人阅读 评论(0)
<a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</ ...