html5 中心点旋转,html5 canvas围绕中心点旋转

围绕中心点旋转

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

canvasApp();

}

function canvasSupport(){

return Modernizr.canvas;

}

function canvasApp(){

if(!canvasSupport()){

return;

}else{

var theCanvas = document.getElementById('canvas')

var context = theCanvas.getContext("2d")

}

drawScreen();

function drawScreen(){

context.fillStyle="black";

context.fillRect(20,20,25,25);

context.setTransform(1,0,0,1,0,0);

var angleInRadians = 45 * Math.PI / 180;

var x = 100;

var y = 100;

var width = 50;

var height = 50;

context.translate(x+.5*width,y+.5*height);

context.rotate(angleInRadians);

context.fillStyle="red";

context.fillRect(-.5*width,-.5*height,width,height);

}

}

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

这一次我们设置了变量。。。是不是感觉看起来莫名的亲切了

var x = 100;

var y = 100;

var width = 50;

var height = 50;然后我们用函数context.translate把画布原点平移到红色正方形的中心点。这个函数可以将画布原点移到(x,y)处。这里将原点X坐标值设为红色正方形的左上角的X值(100)加上其一半的宽度。使用前面创建的变量即可控制这个红色正方形的属性X+0.5*width然后Y坐标然后执行平移函数然后旋转

实现canvas以图片中心旋转

利用canvas的roate和translate方法实现按中心旋转的效果

新建html页

定义画布，以及图案的位置和大小参数

obj.x/y为长方形在canvas中的位置

obj.width/height为长方形的宽高

画一个简单的长方形，让它每100毫秒旋转1度

浏览器中打开页面会发现，旋转是以画布的左上角为圆心的

在旋转之前，把画布的中心位置translate到图片的中心

旋转之后，把中心translate回初始的位置，然后再绘制长方形

完成，浏览器打开页面，可以看到图案以中心旋转的效果

canvas{

position: absolute;

border: 1px solid;

}

var ctx1=canvas1.getContext('2d');

var obj={

x:100,

y:200,

width:200,

height:400

};

/**

* 画一个简单的长方形，让它每100毫秒旋转1度

*/

// 浏览器中打开页面会发现，旋转是以画布的左上角为圆心的

function rotate(){

ctx1.clearRect(0,0,800,800);

ctx1.fillStyle='blue';

ctx1.rotate(Math.PI/180);

ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);

ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);

}

// 在旋转之前，把画布的中心位置translate到图片的中心

function rotate2(){

ctx1.clearRect(0,0,800,800);

ctx1.fillStyle='blue';

ctx1.translate((obj.x+(obj.width/2)),(obj.y+(obj.height/2)));

ctx1.rotate(Math.PI/180);

ctx1.translate(-(obj.x+(obj.width/2)),-(obj.y+(obj.height/2)));

ctx1.strokeRect(obj.x,obj.y,obj.width,obj.height);

ctx1.fillRect(obj.x,obj.y,obj.width,obj.height);

}

// setInterval(rotate,100);

setInterval(rotate2,100);

来源：https://www.cnblogs.com/jiangxiaobo/p/6124756.html