canvas绘制旋转图形 |
您所在的位置:网站首页 › canvas旋转画布 › canvas绘制旋转图形 |
将绘制到canvas上的要素进行旋转: 1、绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2、操作操作DOM元素,直接旋转canvas画布
操作画布的坐标轴状态: var rect = {w:200,h:50,x:100,y:100}; function rotateCanvas(){ var angle = document.getElementById('angle').value; ctx.clearRect(0,0,myCanvas.width,myCanvas.height); ctx.translate(rect.x+rect.w/2,rect.y+rect.h/2); //坐标原点平移至该图形的中心点 ctx.rotate(angle*Math.PI/180); //旋转坐标轴 //ctx.scale(0.5,0.5); ctx.translate(-(rect.x+rect.w/2),-(rect.y+rect.h/2)); //坐标原点平移至初始位置 //ctx.scale(1,1); ctx.fillRect(rect.x,rect.y,rect.w,rect.h); }
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |