canvas基础第三节,CSS或JS已毕gif动态图表的终止与广播

CSS或JS完成gif动态图表的终止与播音

2015/12/06 · CSS,
JavaScript ·
gif

原文出处:
张鑫旭   

一、屋外:寒风吹,雪花飘;屋内:空调吹,代码飘

早晨出去买菜,正好下雨了,还夹杂着冰珠子。鄙人大意,穿的是一件帅气但单薄的香艳大衣,立马冻成了中华田园犬。原本安插去钓鱼的,科科,作罢,早上在家看中央电视机台5
克利夫兰骑士队vs新奥尔良鹈鹕队,深夜补动漫码代码做著作,好生惬意。

亚洲必赢官网 1

对此习惯性刷微博的自己,总时不时会看出类似上边的一日游:

测测你和小白(白百何女士)有怎么着共同点,戳开动图,起始看清的词是哪些?ie浏览器的同桌可以按esc键(或截屏),据说在哪些词暂停,哪个词就是你啊!亚洲必赢官网 2

亚洲必赢官网 3

OK,
那里出现一个浏览器特性,就是通过ESC飞快键,暂停gif的播报。据说FireFox浏览器以前也有,后来被干掉了,根据@紫云妃的传教是:

是如此的,Firefox原来的展现是:在页面load事件形成,同时x按钮变成刷新按钮之后,esc依旧有几个效益,中断当前正在发送的ajax,websocket,停止gif,apng动画的播放.但这个效应太小众了,影响了普通用户的施用,可能不小心按了esc,结果ajax断了,网页出错了.所以Firefox20改动成:网页加载成功后,esc键完全失效.

可是,这种隐晦的但如同会潜移默化健康职能的小技巧肯定是心有余而力不足落到实处真正含义上的gif动态图表的告一段落与播音的。一是包容性,二是功用性,三是移动端没有ESC键。

所以,即使大家相遇要求可以随时各处甘休gif动态图片播放的急需的时候,就须求摸索别的的出路。好,初冬里的暖身甘休,初阶进入正题~~

一、图形的结合情势

自身平昔爱护灰度图像因为我认为他俩看起来更有艺术感。很多图形编辑如Photoshop很不难把你的彩色图像变成灰度。甚至有选用调整颜色深浅和色调。不幸的是,那样的功用想做在互连网上并不易于,因为浏览器有出入。

二、gif图片自己可控前提下的不二法门一:多img资源支配处理

即使说,大家期待暂停的gif是和谐(开发人士)传上去的,不是用户可以随意上传不可控的gif.
大家得以那样处理,就是准备2套图形,一个是gif动态图表,还有一个是唯有一帧的雷打不动的图片。然后选用JS来回切换`的src`值为那两张图纸地址就好了。

此方法吗简单,我就不放实例了。

img.src=”animate.gif”; // 或者变现的是 img.src=”static.png”;

1
2
3
img.src="animate.gif";
// 或者呈现的是
img.src="static.png";

以此点子最大的独到之处就是包容性强,所有浏览器都落到实处截至效果。可是,那种格局有个局限,就是,暂停时候显示的图片永远是同等张。基本上可以说是截至,而不是搁浅。

那有没有啥样艺术可以真正含义上的中断呢?还真有!

法一:
img 标签是绝非 onload 事件的.所以 UBB
代码中的img用到的onload来拍卖大的图形展开自适应,那样的法子就无法使用了.
不过通过测试,body如故得以带onload事件的,
所以我解决的章程就是在页面全部加载完后再处理太大的图片.
于是乎用JS写了一段不难的代码

globalAlpha是一个介于0和1以内的值(包涵0和1),用于指定所有绘制的透明度。默许值为0。即使拥有继续操作都要基于相同的透明度,就足以先把globalAlpha设置为适当值,然后绘制,最后在把它设置回默认值0.

//绘制一个紫色的矩形

context.fillStyle=”red”;

context.fillRect(10,10,50,50);

亚洲必赢官网 4

三、gif图片自己可控前提下的办法二:CSS3 animation控制

也就是我们来看的gif效果并不是一个真正的gif图片,而是利用CSS3的animation属性控制形成的逐帧动态图表效果。我搜了下,@DO1路人乙有篇文章“css3-animation制作逐帧动画”专门介绍了那种技能。说穿了就是animation控制Coca Colas图片的background-position值模拟gif效果。

比如,新版twitter的Like的机能,貌似就有使用该技术:
亚洲必赢官网 5

拔取CSS3
animation完成类gif效果的功利在于,图片能够无损,且大家可以很自在地控制图片动画的中断和播发,使用的是:animation-play-state: paused;这么些宣称。

您可以狠狠地点击那里:运用CSS3
animation达成gif动图的刹车和广播demo

点击demo页面的中断按钮,您会意识,直接就停住了,如下截图示意,截自IE10浏览器:
亚洲必赢官网 6

重复点击,就会在暂停画面之后一连播放了。从而达成了俺们对动画图片的确切控制作用。

此办法看起来完美,不过,1. IE10+等扶助CSS3 animation的浏览器才行;2.
最大的难点是图表需如果温馨主宰,借使想控制用户上传的实在意义的gif图片,只好……望洋兴叹……………………吗?

连锁代码
function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[canvas基础第三节,CSS或JS已毕gif动态图表的终止与广播。j].width=(document.images[j].width>420)?”420″:document.images[j].width;
}
}

//修改全局透明度

 

四、自己不可能控制的gif图片的甘休与播音

比方说,页面上用户上传了些gif图片,哎哎,闪瞎了自己的中原田园眼,我要所有停顿,如何做?如果后台同学没有对gif举行静态处理,此时,只好靠前端小伙伴,有哪些措施啊?

有一个。HTML5
canvas可以读取图片信息,绘制当前图片。于是可以兑现图片夏洛特克,模糊,色值过滤等众多图纸特效。大家那边并非那么复杂,只要读取我们的图纸,重绘下就可以。

你可以狠狠地方击那里:应用JS和canvas达成gif动图的停下和播发demo

点击按钮,然后:
亚洲必赢官网 7

亚洲必赢官网 8

怎么样利用?
自己对HTMLImageElement原型举行了扩展,扩张了stop()play()多少个章程,如下:

if (‘getContext’ in document.createElement(‘canvas’)) {
HTMLImageElement.prototype.play = function() { if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null; // 透明度还原 image.style.opacity = ”; } if
(this.storeUrl) { this.src = this.storeUrl; } };
HTMLImageElement.prototype.stop = function() { var canvas =
document.createElement(‘canvas’); // 尺寸 var width = this.width, height
= this.height; if (width & height) { // 存储往日的地方 if
(!this.storeUrl) { this.storeUrl = this.src; } // canvas大小
canvas.width = width; canvas.height = height; // 绘制图片帧(第一帧)
canvas.getContext(‘2d’).drawImage(this, 0, 0, width, height); //
重置当前图片 try { this.src = canvas.toDataURL(“image/gif”); } catch(e)
{ // 跨域 this.removeAttribute(‘src’); // 载入canvas元素
canvas.style.position = ‘absolute’; // 后边插入图片
this.parentElement.insertBefore(canvas, this); // 隐藏原图
this.style.opacity = ‘0’; // 存储canvas this.storeCanvas = canvas; } }
}; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
if (‘getContext’ in document.createElement(‘canvas’)) {
    HTMLImageElement.prototype.play = function() {
        if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = ”;
        }
        if (this.storeUrl) {
            this.src = this.storeUrl;    
        }
    };
    HTMLImageElement.prototype.stop = function() {
        var canvas = document.createElement(‘canvas’);
        // 尺寸
        var width = this.width, height = this.height;
        if (width & height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧(第一帧)
            canvas.getContext(‘2d’).drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute(‘src’);
                // 载入canvas元素
                canvas.style.position = ‘absolute’;
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = ‘0’;
                // 存储canvas
                this.storeCanvas = canvas;
            }
        }
    };
}

世家只要在页面中自己的JS文件中复制上边的代码,然后就可以直接:

var image = document.getElementsByTagName(“img”)[0]; // 停止gif图片
image.stop(); // 播放gif图片 image.play();

1
2
3
4
5
var image = document.getElementsByTagName("img")[0];
// 停止gif图片
image.stop();
// 播放gif图片
image.play();

//zxx:
上面代码并未详细测试,以及可能的感受难题(IE闪动)没有切实可行处理(影响原理示意),若要实际选用,必要协调再微调完美下。

不足

  1. IE9+支持。IE7/IE8不支持canvas没搞头。
    2.
    不得不为止gif,不能真的含义的刹车。因为canvas得到的gif图片新闻为率先帧的消息,后面的相似获取不到。要想达成暂停,而不是甘休,还须求更加商量,假诺您有主意,分外欢迎分享。

接下来 在 body 上添加 onload=”ReImgSize()” 就可以了.
透过测试,在Mozilla和IE上通过.
在那边补充一下有关
图片的自适应,那点Mozilla做的比IE好,因为可以用CSS来决定图片的自适应.
俺们都清楚 Mozilla 援救一个 max-width
的CSS语法.于是,大家如此那样定义图片的全局样式

context.globalAlpha=0.5;

//绘制紫色矩形

context.fillStyle=”blue”;

context.fillRect(30,30,50,50);

1、CSS Filter

五、结束语

是胡不是霍,是霍躲然而!哈哈!
亚洲必赢官网 9
上面那些gif也是demo示意gif强力候选。后来一商讨,看我小说的仍旧宅男多,腐女少,所以,你懂的……
亚洲必赢官网 10

——我是多年不见的低调的分隔线—–

正文gif相比多,要是你是运动设备查看本文,会意识,怎么我的电池怎么越来越瘦了!不是因为天冷冻小了,而是gif比较功耗。所以,从这几个角度讲,大家其实有要求在移动端默许为止这一个gif的播音,用户点击再播放。一来省流量,二来省电。

比方没有静态图片资源支撑,那不妨试试文章出现的片段艺术,有心得记得来这里反映哈!
亚洲必赢官网 11

终极,本文的形式都是有毛病的,自己也没有在实质上项目中利用过。由此,假诺阅读本文的您:

  1. 有更周详的gif暂停与广播格局;
  2. 意识文中方法有不足和疏漏;

都更加希望可以不吝赐教!

感谢阅读!周末温暖!

 

1 赞 6 收藏
评论

亚洲必赢官网 12

有关代码 
img{
max-width:100%;height:auto;
}

//重置全局透明度

  使用CSS过滤器属性可能是最简便易行的章程把图像成为灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包含灰度。

这么图片就回在div或table内活动适应其尺寸了.

context.globalAlpha=0;

//那些事例中黑色矩形会呈现半晶莹剔透效果,透过它可以看来上边的革命矩形。

  现在,过滤器属性是CSS3规范的一有的,并协助在一部分浏览器,Firefox、Chrome和Safari。从前,大家也关乎Webkit过滤器,它不仅将图像成为粉红色也足以改为红色和混淆效果。

那也是一种很不难有效的法子:利用CSS+JS让图片自动缩放-图片不变形

globalCompositionOperation表示绘制后的图形怎么着与先绘制的图样组成。那一个特性的值是字符串,可能的值如下:

source-over(默许值):后绘制的图样位于先绘制的图片上方。

source-in:后绘制的图纸与先绘制的图形重叠的有些可知,两者其他部分完全透明。

source-out:后绘制的图样与先绘制的图样不重叠的有的可知,先绘制的图纸完全透明。

source-atop:后绘制的图形与先绘制的图样重叠的有的可见,先绘制图形不受影响。

destination-over:后绘制的图纸位于先绘制的图纸下方,后绘制的图形只有此前透明像素下的有些才可知,被屏蔽的有的不可知。

destination-in:后绘制的图片位于先绘制的图纸下方,两者不重叠的一些完全透明。就是显得重叠的有些的样子,呈现先绘制的图样的颜料。

destination-out:后绘制的图样擦除与先绘制的图片重叠的一对。

destination-atop:后绘制的图样位于先绘制的图样下方,在相互不重叠的地方,先绘制的图片会变透明。

lighter:后绘制的图片与先绘制的图纸重叠部分的值相加,使该片段变亮。(叠加的是颜色额)

copy:后绘制的图纸完全代替与之重叠的先绘制图形。

xor:后绘制的图形与先绘制的图形重叠的有些举行“异或”操作;图像异或,相异为1,相同为0.即重叠部分不显得,不重叠部分显得。

//画目的图

context.beginPath();

context.fillStyle=”red”;

context.fillRect(100,50,100,300);

//画源图

context.beginPath();

context.globalCompositeOperation=”destination-out”;

//context.globalCompositeOperation=”xor”;

context.fillStyle=”blue”;

context.arc(250,200,100,0, Math.PI*2);

  添加如下CSS样式可以将图像成为灰色

.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7
*/

对象图像:已经停放画布中的绘图

img { 
-webkit-filter: grayscale(1);/* Webkit */ 
filter:gray;/* IE6-9 */ 
filter: grayscale(1);/* W3C */ 
}
  支持IE6-9和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)

* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ?
100 : auto);
height: expression(this.height > 100 ? 100 : auto);

源图像:打算放置到画布中的绘图

在使用globalCompositionOperation的图景下自然要多测一些浏览器,因为不一样的浏览器对那一个特性的落实仍旧存在较大的差异。


  (注意:那段代码在Firefox上无听从。)

法二:

二、使用图片

//第一种写法:第四个参数:图片对象;第一个参数是始于画的x坐标;第八个参数:伊始画的y的坐标;

//context.drawImage(img,0,0);

//第三种写法:首个参数:图片对象;第三个参数:是早先画的x坐标;第多个参数:起始画的y的坐标;第四个参数:图片绘制到canvas上的增幅;第八个参数:图片绘制到canvas上的冲天;

//context.drawImage(img,0,0,200,200);

//第三种写法(裁剪):第三个参数:图片对象;第二多个参数在原图上要裁剪的伊始x、y的坐标;第四、三个参数:在原图上要裁剪的宽和高;第六、多少个参数:要放到canvas画布上的早先x、y坐标;第八九个参数:要到canvas画布上的宽和高;

context.drawImage(img,100,100,100,100,50,50,300,300);

var  canvas=document.getElementById(“myCanvas”);

var   context=canvas.getContext(“2d”);

  2、Javascript

初叶是判定heigth和width,然后再决定什么人除什么人再乘什么人。怎么没有想到可以如此:?heigth和width只保留一个属性即可。

var   img= newImage();

  第二种办法是透过利用JavaScript技术上应当协助具备JavaScript的浏览器,包涵IE6以下

function resizeImg(img) {
try {
   if (img.offsetWidth > 0) {
    if (img.offsetWidth > img.height) {
     img.width = img.height;
     img.removeAttribute(‘height’);

img.src=”img/20150821130732_anQeR.jpeg”;

  代码来自Ajax Blender.

    }
   }
   else {
    setTimeout(function() {resizeImg(img);}, 50);
   }
}
catch (ex) {
   ;
}
}

img.onload=function(){

varimgObj = document.getElementById(‘js-image’); 
functiongray(imgObj) { 
varcanvas = document.createElement(‘canvas’); 
varcanvasContext = canvas.getContext(‘2d’); 

<img onload=’resizeImg(this);’ height=’220′
src=’upload/200812052052440545.gif’>

context.drawImage(img,100,100,100,100,50,50,300,300);

varimgW = imgObj.width; 
varimgH = imgObj.height; 
canvas.width = imgW; 
canvas.height = imgH; 

言必有中代码是一种简单但不简单的思索,是一种美。

}

canvasContext.drawImage(imgObj, 0, 0); 
varimgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 

主意三:(能够操纵图片高、宽在超出规定范围的时候才缩放)

归咎应用drawImage( )和其余办法,可以对图像举行各类基本操作。而操作的结果可以透过toDataURL( )方法赢得。可是有一个不一,即图像不可能来自其余域。如若图像来自别的域,调用toDataURL( )会抛出荒谬。

for(vary = 0; y < imgPixels.height; y++){ 
for(varx = 0; x < imgPixels.width; x++){ 
vari = (y * 4) * imgPixels.width + x * 4; 
varavg = (imgPixels.data[i]亚洲必赢官网 , + imgPixels.data[i + 1] +
imgPixels.data[i + 2]) / 3; 
imgPixels.data[i] = avg; 
imgPixels.data[i + 1] = avg; 
imgPixels.data[i + 2] = avg; 


canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width,
imgPixels.height); 
returncanvas.toDataURL(); 

imgObj.src = gray(imgObj);
  3、SVG

function resizeImgX(img,iwidth,iheight)
{
   var _img = new Image();
   _img.src = img.src;
   if(_img.width > _img.height)
   {
      img.width = (_img.width > iwidth) ? iwidth : _img.width;
      img.height = (_img.height / _img.width) * img.width;
   }
   else if(_img.width < _img.height)
   {
      img.height = (_img.height > iheight) ? iheight :
_img.height;
      img.width = (_img.width / _img.height) * img.height ;
   }
   else
   {
      img.height = (_img.height > iheight) ? iheight :
_img.height;
      img.width = (_img.width > iwidth) ? iwidth : _img.width;
   }
}

canvas提供了toDataURL的接口,可以便宜的将canvas画布转化成base64编码的image。近日帮助的最好的是png格式,jpeg格式的现世浏览器基本也支撑,然则协理的不是很好。

  第三种办法来自SVG
Filter.,你要求成立一个SVG文件,并将以下代码写在里边,保存命名为***.svg

调用:
<img onload=’resizeImg(this,500,400);’
src=’upload/200812052052440545.gif’>

//我们创立一个画布,在上面做一些制图,然后试着把它保存为当地图片。

var  can = document.getElementById(‘canvas’);

var  ctx = can.getContext(‘2d’);

var   imgA = new Image();

imgA.src =’

/uploads/2013/09/css_yangshijiance.png’;

imgA.onload = function() {

ctx.drawImage(imgA, -25, 0, imgA.width, imgA.height);

ctx.restore();

};

var   imgB = new Image();

imgB.src = ‘

/uploads/2013/09/canvas_chroma.png’;

imgB.onload = function() {

ctx.globalAlpha = 0.1

ctx.drawImage(imgB, -100, -75, imgB.width, imgB.height);

ctx.restore();

};

function toImage(returnType) {

<svgxmlns=” ; 
<filterid=”grayscale”> 
<feColorMatrixtype=”matrix”values=”0.3333 0.3333 0.3333 0 0 0.3333
0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″/> 
</filter> 
</svg>
  然后接纳过滤器的特性,大家得以通过SVG文件中的元素的ID连接SVG文件

方法四:
<script language=”JavaScript”> 
<!– 
function ResizeImages()
{
var myimg,oldwidth; 
var maxwidth=180; //缩放全面 
for(i=0;i <document.images.length;i++){
myimg = document.images[i]; 
if(myimg.width > maxwidth)

oldwidth = myimg.width; 
myimg.width = maxwidth; 
myimg.height = myimg.height * (maxwidth/oldwidth); 


}
//–> 
</script>

var dataURL = document.getElementById(‘canvas’).toDataURL(“image/png”);

// The returnType argument specifies how to get the

// the image.  ‘obj’ will set the source to an image element.

// ‘window’ will open a new window and display the image.

// ‘download’ will prompt the user to save the image.

switch(returnType) {

case ‘obj’:

var imgObj = new Image();

img { 
filter:url(‘img/gray.svg#grayscale’); 
}
  你也足以把它内置CSS文件中,例如:

imgObj.src = dataURL;

document.getElementById(‘graphics’).appendChild(imgObj);

break;

case ‘window’:

window.open(dataURL, “Canvas Image”);

break;

case ‘download’:

dataURL = dataURL.replace(“image/png”, “image/octet-stream”);

img { 
filter:url(‘url(“data:image/svg+xml;utf8,<svg%20xmlns=’
“);’) 
}
  总结

<script language=”JavaScript”>
<!–
//图片按比例缩放
var flag=false;
function DrawImage(ImgD,iwidth,iheight){
//参数(图片,允许的宽度,允许的万丈)
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){ 
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+”×”+image.height;
}
else{
if(image.height>iheight){ 
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height; 
}else{
ImgD.width=image.width; 
ImgD.height=image.height;
}
ImgD.alt=image.width+”×”+image.height;
}
}

//–>
</script>

document.location.href = dataURL;

break;

}

}

优良的气象是页面上有三个点击链接:

1、Image Tag

点击会有一张图片插入在网页中。

2、New Window

开辟一个新的窗口,并展现一个PNG格式的图样

3、Download

下载保存一张PNG个格式的图纸

很不幸,点击并不曾反映,为何吧?作者做了过多测验,原因出在图纸渲染上,canvas上一旦添加图片,toDataURL()将失效,获取不到canvas音讯。通过简单几步来表明这几个题材。

把js脚本中图纸渲染的一些去除,A和B图。为了便利观望,在画布上画一个概括的矩形,填充颜色:

ctx.fillStyle = ‘Red’;

ctx.strokeStyle = ‘Green’;

ctx.beginPath();

ctx.rect(20, 20, 100, 100);

ctx.stroke();

ctx.fill();

如此那般画布上便体现为一个黑色矩形,格式为PNG


  为了能过跨浏览器协理灰度的功能,大家可以把上述措施和一起使用上边的代码片段去达成。那段代码将援救Firefox
3.5+, Opera 15+, Safari, Chrome, and IE

调用:<img src=”images/toplogo.gif”
onload=”javascript:DrawImage(this,100,100)”>

三、裁剪

var  canvas=document.getElementById(“myCanvas”);

var  context=canvas.getContext(“2d”);

//绘制一个三角

context.beginPath();

context.moveTo(200,200);

context.lineTo(250,200);

context.lineTo(225,150);

context.closePath();

context.stroke();

img { 
-webkit-filter: grayscale(100%); 
-webkit-filter: grayscale(1); 
filter: grayscale(100%); 

//调用裁剪

filter:url(‘../img/gray.svg#grayscale’); 
filter:gray; 
}
  我们可以运用方面的代码和JavaScript方法和只提供CSS滤波器作为后备避防JavaScript被剥夺。那么些想法能够很不难地Modernizr的增援下完毕的。

context.clip();

var  img= newImage();

img.src=”img/20150821130732_anQeR.jpeg”;

img.onload=function() {

context.drawImage(img,0,0);

}

.no-js img { 
-webkit-filter: grayscale(100%); 
-webkit-filter: grayscale(1); 
filter: grayscale(100%); 

//你上边画的是何许模样,裁剪出来的就是什么形状


filter:url(‘../img/gray.svg#grayscale’); 
filter:gray; 
}
  OK了,你的浏览器上可以看到很炫的功用了!!

四、使用图像数据

var  canvas=document.getElementById(“myCanvas”);

var   context=canvas.getContext(“2d”);

//getImageData()取的原本图像数据

//有三个参数:第一二个参数,初阶得到像素的x,y坐标,第三多少个参数,获取像素点的宽高。

//var  ImageData=context.getImageData(0,0, img.width, img.height);

此地再次回到的靶子是getImageData()的实例,每个getImageData()对象都有两个特性:width、height、data。

width和height表示访问像素区域大小

//其中data属性是一个数组,保存着图像中每一个像素的多寡。

//在data数据中,每一个像素用4个元平昔保存,分别代表红、绿、蓝和透明度。

//数组中的每个元素都是介于0和255中间的,可以直接访问到原有图像数据,

//就可见以各类法子来操作这一个多少。

var  img= newImage();

img.src=”img/20150821130732_anQeR.jpeg”;

img.onload=function() {

context.drawImage(img,0,0);

var   ImageData=context.getImageData(0,0, img.width, img.height);

var   data=ImageData.data;

//注意:每便循环控制变量i都递增4,在收获每个像素的红、绿、蓝颜色值后,

//计算出她们的平均值,再把那么些平均值设置为各样颜色的值,

//结果就是去掉了每个像素的水彩,只保留了亮度接近的灰度值.(用彩色变黑白)

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

var  r=data[i];

var  g=data[i+1];

var  b=data[i+2];

//求rgb的平均值,

var  gray=(r+g+b)/2;

//设置颜色值

data[i]=gray;

data[i+1]=gray;

data[i+2]=gray;

}

//putImageData()方法把图像数据绘制到画布上,有多少个参数

//第二个参数,获取ImageData,第二三个参数,要松开画布上的x,y坐标

context.putImageData(ImageData,0,0);

}


五、canvas摄像处理

function animation( ){

//video.ended 属性再次来到音频/摄像是还是不是已终结。重临值:布尔值true|false。假若播放已甘休,则赶回 true。否则重临 false。

if(!video.ended){

//将摄像的每一帧,绘制在canvas上

context.drawImage(video,0,0,canvas.width,canvas.height);

window.requestAnimationFrame(animate);

}

}

//当视频能够播放时,进行播放调用循环

//video的oncanplay事件类似于图像的onload,加载成功之后

//oncanplay 事件在用户可以起来播放视频/音频(audio/video)时接触。

//object.oncanplay=function(){myScript};

//object.addEventListener(“canplay”,myScript);

video.oncanplay=function(e){

video.play( );

window.requestAnimationFrame(animate);

}


六、canvas动画

最原始的您还足以使用window.set提姆out()或者window.setInterval()通过不断更新元素的景况地方等来贯彻动画,前提是镜头的创新频率要高达每秒60次才能让眼睛看到流畅的动画片效果。

window.requestAnimationFrame()通过递归调用同一方法来不断更新画面以高达动起来的机能,但它优于set提姆eout/setInterval的地点在于它是由浏览器专门为卡通提供的API,在运行时浏览器会自行优化措施的调用,并且只要页面不是激活状态下的话,动画会自动刹车,有效节约了CPU开销。

打消该次动画:可以一向调用,也得以透过window来调用,接收一个函数作为回调,重临一个ID值,通过把那些ID值传给window.cancelAnimationFrame()可以撤除该次动画。

window.requestAnimationFrame()方法用于告诉浏览器,你想在浏览器的下个重绘
此前来执行一个动画片或者举办浏览器通过调用一个一定的函数来更新动画的呼吁。该方法会在下次重临此前实施一个看成参数的回调函数。

window.requestAnimationFrame
是专程为已毕高品质的帧动画而安插的一个API,近日已在四个浏览器获得了支撑,包括IE10+,Firefox,Chrome,Safari,Opera等,在运动设备上,ios6以上版本以及IE
mobile
10之上也辅助requestAnimationFrame,唯一相比遗憾的是眼下安卓上的原生浏览器并不帮助requestAnimationFrame,然则对requestAnimationFrame的支撑应该是必然了,安卓版本的chrome
16+也是永葆requestAnimationFrame的。

例子window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;


七、落成多少个小球随机运动,用面向对象的不二法门

var   canvas=document.getElementById(“myCanvas”);

var   context=canvas.getContext(“2d”);

//圆是一个类,就是目的只有一个,就是圆

functionCircle(x,y,r,speedX,speedY,color) {

//所有的品质

this.r=r;

this.x=x;

this.speedX=speedX;

this.speedY=speedY;

this.y=y;

this.color=color;

}

//在原型上写方法,

//第二个法子,画圆

Circle.prototype.draw=function() {

context.beginPath();

context.fillStyle=this.color;

context.arc(this.x, this.y, this.r,0, Math.PI*2);

context.fill();

}

//第四个章程,运动

Circle.prototype.move=function() {

//那里改变x递加的值,可以改变运动速度

this.x+=this.speedX;

this.y+=this.speedY;

if(this.x>=canvas.width-this.r||this.x<=this.r) {

this.speedX*= -1;

}

if(this.y>=canvas.height-this.r||this.y<=this.r) {

this.speedY*= -1;

}

}

//进行实例化操作

//达成同时出现四个小球,需求同时实例化出多少个对象

//储存new出来的实例化对象数组

var   arr=[ ];

//来不少个小球

for(var  i=0; i<100; i++) {

//设置一个随便的半径

var   R=randomNum(30,5);

//随机地点

var   X=randomNum(canvas.width-R, R);

var    Y=randomNum(canvas.height-R, R);

//随机速度

var   speedX=randomNum(8,1);

var    speedY=randomNum(8,1);

//随机颜色

var    
COLOR=”rgb(“+randomNum(255,0)+”,”+randomNum(255,0)+”,”+randomNum(255,0)+”)”;

//将对像实例化

var    newCircle= newCircle(X, Y, R, speedX, speedY, COLOR);

arr.push(newCircle)

}

moveCircle();

//定义一个实践动画的函数

function    moveCircle() {

//先清理画布

context.clearRect(0,0, canvas.width, canvas.height);

//循环执行实例化对象的数组

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

arr[i].draw();

arr[i].move();

}

//执行动画

window.requestAnimationFrame(moveCircle);

}

//定义一个任意数的函数

functionrandomNum(max,min) {

returnparseInt(Math.random()*(max-min+1)+min);

}

网站地图xml地图