用canvas画布让物体沿着圆形轨迹或者扇形轨迹运动起来

 

用canvas画布让物体沿着圆形轨迹或者扇形轨迹运动起来

Canvas{
        id:canv
        x:1499-500
        y:300
        width: 500
        height: 500
        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, 500, 500);
            ctx.fillStyle = 'red'
            ctx.strokeStyle="green";


            var time = new Date();
            ctx.save();
            ctx.translate(100, 100);//画布坐标移动100,100,画布位置不变,以防旋转的时候,跑到画布外面,显示不了.

           //绘制earth轨道
            ctx.beginPath();
            ctx.arc(0, 0, 90, 0, 2 * Math.PI)
            ctx.rotate(root.socTemp*10/180.0/(Math.PI))//画布旋转,整个坐标也跟着旋转,
            ctx.translate(90, 0);//向右移动90.画布旋转起来了,图片就旋转起来了
            ctx.drawImage("qrc:/tripCircle.png",-11,0);

            ctx.stroke();
            ctx.restore();

        }
    }