Libx

Canvas学习:save & restore

字数统计: 882阅读时长: 3 min
2017/05/12 Share

save和restore的使用

最近在学习Canvas,先是看了MDN上面关于Canvas的文档,然后写了一些小练习,画了一些基本的图形,然后画了一个地月太阳的小动画,在画的过程中对于save和restore有些一些更加准确的认识,现在就来写一写总结一下。

当我们在 HTML5 Canvas 上使用其 2D 上下文进行图形绘制的时候,可以通过操作 2D 上下文的属性来绘制不同风格的图形,通常情况下,在画布上的绘图时,我们需要更改在绘制的2D背景下的状态。设置绘图的属性非常繁琐,每次更改时都要从来一次,我们可以利用利用堆栈来保持绘图的属性并在需要的时候随时恢复,即是save和restore方法。

我们知道,canvas的绘制都是基于属性的状态的。这些状态有什么?举个直观的例子,我个人认为在使用的时候主要有translate即坐标轴的转换,因为动画中常用的缩放,旋转等都是以坐标轴原点为圆心的。如果我们想要让一个地球围绕着另外太阳转//当然只是图片,那么很明显,我们将坐标轴移动到太阳的中心,或者说移动到太阳的某个点然后drewimage具体设置图片的位置,总之我门所要达到的目的就是要将坐标原点给搞到太阳的圆心上去,搞上去之后就可以将图片旋转了。然后呢?我们现在要继续画月亮了,继续移动坐标,继续转圈,继续画地球的轨道,这时候就需要让坐标回去,但是这样来回的让坐标转来转去是不是非常的讨厌,所以我们就需要用到save这个方法来把某个状态给保存起来,相当于什么?快照?反正就是把这个状态给保存在内存的栈里面,然后在需要这个状态的时候就用restore将这个状态弹出,然后就可以使用了。注意它是压到栈中的,栈的特点是什么?先进后出,后进先出所以这时就要注意save和restore的恰当的使用时间及使用次数啦。一定不要搞错啦。当然这个状态并不只是坐标什么的,他还包括有线条勾勒的颜色,填充颜色,等等。

Talk is cheap, show you my code. hahahahahah

var me=new Image();
var she=new Image();
function init(){
me.src="http://tupian.aladd.net/2015/11/1354.jpg";
she.src="http://pic29.photophoto.cn/20131009/0005018344382834_b.jpg";
window.requestAnimationFrame(draw);
}
function draw () {
var canvas=document.getElementById("canvas");
ctx=canvas.getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,300,300);
ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
ctx.save();
ctx.translate(150,150);
ctx.drawImage(she, -50, -50, 100, 100);
var time=new Date();
ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.translate(105,0);
ctx.rotate(-((2 * Math.PI) / 60) * time.getSeconds() -((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.drawImage(me,-30,-30,60,60);
ctx.save();
ctx.restore();
ctx.restore();//注意之前我们共save了两个状态,需要回到最初的状态,所以这里弹出两次
ctx.beginPath();
ctx.arc(150, 150, 105, 0, Math.PI * 2, false);//orbit
ctx.stroke();
window.requestAnimationFrame(draw);
}
init();

这个并不是太阳,地球,月亮的。而是为了大致的说明一下情况,就只有me围着she转,然后画出了me的轨道。画起来还是很嘲讽的==!

大概就是这些了吧。

CATALOG
  1. 1. save和restore的使用