javascript canvas 如何对图片进行绕中心点旋转

JavaScript026

javascript canvas 如何对图片进行绕中心点旋转,第1张

给你一个旋转的demo:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">

Your browser does not support the HTML5 canvas tag.

</canvas>

<br/>

<input type="text" id="angle_v" readonly="1"/>

<script>

var c=document.getElementById("myCanvas")

var ctx=c.getContext("2d")

ctx.translate(100,45)

//ctx.rotate(70*Math.PI/180)

//ctx.fillRect(-50,-25,100,50)

var angle=10

var angle_now = 0

myRotate()

function myRotate()

{

  ctx.clearRect(-100,-50,200,100)//x2 是为了把原来的图全部抹掉（不留下痕迹）

  ctx.rotate(angle*Math.PI/180)

  ctx.fillRect(-50,-25,100,50)

  angle_now= (angle_now + angle)%360

  document.getElementById("angle_v").value="当前角度:"+angle_now

  setTimeout(myRotate,1000)

}

</script>

</body>

</html>

注意：用roate实现旋转，重点在于改变坐标中心点 : ctx.translate(100,45)

    坐标中心点计算公式：x = 左上角x + 宽度/2

                                       y = 左上角y + 高度/2

    然后translate到(x,y)即可，之后调用rotate进行旋转。

    旋转之后填充时注意：ctx.fillRect(-50,-25,100,50)

                                     x = - 宽度/2

                                     y = -高度/2

                                   fillRect(x,y,宽度，高度)

你的例子，代码控制比较看不懂。。。，所以没在基础上整改。

补充一个参考网站（英文的）：http://tutorials.jenkov.com/html5-canvas/transformation.html

（如果有帮助，望采纳，谢谢）

这是CSS3里面的属性,

以中心为圆点旋转:transform-origin:center 0px

旋转角度:transform:rotate(360deg)

顺时针旋转角度

旋转角度可以写在js代码里,点击旋转或者加载页面旋转.都行