美文网首页
canvas的画布变化

canvas的画布变化

作者: 岩蔷薇 | 来源:发表于2017-03-23 18:34 被阅读0次

    1 缩放

    ctx.scale(scalewidth,scaleheight);
    

    注意:1 缩放的是整个画布,缩放后,继续绘制的图像会被方法或缩小。

    2 当前图像的原点,宽高都被缩放了。

    2 位移

    ctx.stranslate(x,y);
    x:添加到水平坐标上的值;   y:添加到垂直坐标上的值
    

    注意:1 发生位移后,相当于把画布的0,0坐标更换到新的x,y的位置,所有绘制的新元素都被影响。

    2 位移画布一般配合缩放和旋转等。

    3 旋转

    ctx.rotate(angle);
    

    注意:参数angle是弧度

    4 绘制环境保存和还原

    ctx.save(): 保存当前环境的状态
    //一般写在原状态前面,用来保存初始状态
    
    ctx.restore():返回之前保存过的路径状态和属性。
    //获取最近缓存的ctx
    

    一般配合位移画布使用。

    5 设置绘制环境的透明度

    ctx.globalAlpha = number;
    //number:透明质。介于0.0~1.0之间。
    

    设置透明度是全局的透明度的样式。

    6 画布限定区域绘制

    ctx.clip();
    //从原始画布中剪切任意形状和尺寸;
    

    一旦剪切了某个区域,则所有之后的绘图都被限制在被剪切的区域内(不能访问画布上的其他区域)。

    相关文章

      网友评论

          本文标题:canvas的画布变化

          本文链接:https://www.haomeiwen.com/subject/tlutottx.html