初遇canvas之三

###canvas中的变换
    translate(x, y)
        我们先介绍 translate 方法,它用来移动 canvas的原点到一个不同的位置。
        translate 方法接受两个参数。x 是左右偏移量,y 是上下偏移量,
        
        注意:在canvas中translate是累加的,而CSS中不会,会覆盖
            translate会改变rotate的中心点

    rotate(angle)
        这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。
        旋转的中心点始终是 canvas 的原点,如果要改变它,我们需要用到 translate 方法
        
        在canvas中rotate是累加的
        
        
    scale(x, y)
        scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。
        值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。
        缩放一般我们用它来增减图形在 canvas 中的像素数目,对形状,位图进行缩小或者放大。
        
        在canvas中scale是累乘的
    
    注意:
        translate、rotate、scale只能在图形绘制之前才能生效,写在图形绘制之后则不能生效,这一点和CSS十分不同。

猜你喜欢

转载自blog.csdn.net/qq_31207499/article/details/81123631