HTML5 Canvas 实现图片移动效果

转载 (原文地址) lvxinxin_lx 随笔 HTML5 4585阅读 2014-08-02 17:22:21 举报

[table=98%]
[tr][td]Context对象可以通过调用translate()方法来移动Canvas画布中坐标原点的位置。translate()方法的原型如下:
void translate(x, y);
用于将该Context对象所对应的Canvas的(0, 0)点移动到(x, y)点,并将其作为新的(0, 0)点。通过试验表明,translate()方法是通过把当前(0, 0)点设置为(-x, -y)点来实现这种移动的,并且改变后坐标原点将会影响由该Canvas对象生成的其它Context对象。但是,与Canvas中其它操纵图像的方法一样,translate()也只会影响移动后绘制的图形,对已经绘制到画布中的图形无效。
下面的示例展示了移动的效果:[/td][/tr]
[/table]

[code]<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="600" height="400">
<p>
Your browserdoes not support the canvas element!
</p>
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context2D = canvas.getContext("2d");
var pic = new Image();
pic.src = "map.jpg";
//注意目录结构,这里是把图片和html放在一个目录的
//注意下面方法中画笔状态的保护,这在很多情况下都会使用到
function draw() {
context2D.clearRect(0, 0, 600, 400);
context2D.save(); //保存画笔状态
context2D.translate(600 / 2 Math.random(), 400 / 2 Math.random()); //开始移动画笔
context2D.drawImage(pic, 0, 0);
context2D.restore(); //绘制结束以后,恢复画笔状态
}
setInterval(draw, 1000);
</script>
</body>
</html>[/code]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复