sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > canvas绘制旋转图形

canvas绘制旋转图形

作者:xuhongji发布时间:2020-09-13分类:Html浏览:165评论:0


导读:将绘制到canvas上的要素进行旋转:1、绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的2、操作操作DOM元素,直接旋转canv...
将绘制到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); 
    }


欢迎 发表评论:

Html排行
«    2022年8月    »
1234567
891011121314
15161718192021
22232425262728
293031
标签列表
网站分类
文章归档
最近发表
推荐文章