移动
context对象可以通过调用translate()方法来移动canvas画布中坐标原点的位置。translate()方法的原型如下:
void translate(x, y);
canvas HTML?用于将该context对象所对应的canvas的(0, 0)点移动到(x, y)点,并将其作为新的(0, 0)点。通过试验表明,translate()方法是通过把当前(0, 0)点设置为(-x, -y)点来实现这种移动的,并且改变后坐标原点将会影响由该canvas对象生成的其它context对象。但是,与canvas中其它操纵图像的方法一样,translate()也只会影响移动后绘制的图形,对已经绘制到画布中的图形无效。
下面的示例展示了移动的效果:
your browserdoes not support the canvas element!
var canvas =document.getelementbyid("canvas");
html相对位置、var context2d =canvas.getcontext("2d");
var pic = new image();
pic.src ="milaoshu.jpg"; //注意目录结构,这里是把图片和html放在一个目录的
//注意下面方法中画笔状态的保护,这在很多情况下都会使用到
html图片移动。function draw(){
context2d.clearrect(0,0,600,400);
context2d.save();//保存画笔状态
context2d.translate(600/2*math.random(), 400/2*math.random());//开始移动画笔
html2canvas下载、context2d.drawimage(pic,0, 0);
context2d.restore();//绘制结束以后,恢复画笔状态
}
setinterval(draw, 1000);
canvas获取鼠标坐标。your browserdoes not support the canvas element!
var canvas =document.getelementbyid("canvas");
var context2d =canvas.getcontext("2d");
var pic = new image();
pic.src ="milaoshu.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);
效果图:
由于是动态的,看不出效果,抱歉。
摘自 冯小卫
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态