html5中translate的使用

translate是采用变换的方式来改变图片,也就是移动整个上下文的位置,比如你把画笔moveTo(0,0),但是你使用translate(-10,20)的话,他的意思就是把你的画笔向x反方向移动10,向y移动20

输入代码:

———————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>canvas的宽和高的测试1</title>

<script>
function draw(){
var canvas=document.getElementById(“my”);
var context=canvas.getContext(“2d”);
//保存当前的绘画状态
context.save();
//向右下方移动绘图上下文
context.translate(200,0);
//绘图
context.beginPath();
context.moveTo(0,0);//实际是在(200,0)
context.lineTo(-200,200);//实际是在(0,200);
context.moveTo(-200,0);//实际是在(0,0);
context.lineTo(0,200);//实际是在(200,200);

//这样画出来的就是一个交叉的线,和上一篇文写的是一样的效果

context.stroke();

context.restore();
}

window.addEventListener(“load”,draw,true);
</script>
</head>

<body>
<canvas id=”my” width=”200″ height=”200″ style=”border:solid 1px red;”></canvas>
</body>
</html>

—————————————————————————————————————————-

查看效果:http://www.cangzhang.com/wp-content/uploads/2012/08/translate1.htm

共有 0 条评论

Top