canvas的裁剪区域问题 JavaScript DHTML 脚本技术讨论版无忧脚_H5之家

数学不过关！
坐标旋转平移的问题

<html>

<head>

</script>

canvas{

background:#ccc;

}

</style>

</head>

<body>

var img2=new Image();

img2.src='/images/default/logo.gif';

var img3=new Image();

img3.src='/images/default/logo.gif';

var canvas=document.createElement('canvas');

if(!canvas || !canvas.getContext)

{

var errMsg = "Your browser doesn't support HTML5's HTMLCanvasElement \nupdate a modern browser and try!";

alert(errMsg);

throw new Error(errMsg);

}

canvas.width=640;

canvas.height=480;

(document.getElementById('idGameApp')).appendChild(canvas);

//获取画布的上下文

var ctx=canvas.getContext('2d');

ctx.save();

ctx.scale(0.5,0.5);

ctx.drawImage(img2,100,100);

ctx.restore();

ctx.save();

ctx.rotate(0.7854);

ctx.drawImage(img3,200,-100);

ctx.restore();

</script>

</body>

</html>

复制代码

Canvas的旋转是相对于其左上角原点旋转的，图片要实现相对于自身的旋转，必须对Cavas进行坐标旋转平移变换

[ 本帖最后由 chpn 于 2008-3-8 11:36 编辑 ]