美文网首页
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的画布变化

    1 缩放 注意:1 缩放的是整个画布,缩放后,继续绘制的图像会被方法或缩小。 2 当前图像的原点,宽高都被缩放了。...

  • 2017.12.11

    Canvas 画布

  • Canvas尺寸改变时清空画布问题

    Canvas在width和height发生变化时,会自动清空画布,这就意味着在改变尺寸时,Canvas上会有短暂的...

  • canvas-01

    一、canvas绘图步骤: 1.建立canvas画布; 2.通过canvas画布获取上下文对象,即画笔; letc...

  • 自定义view

    view的canvas的几何变化是倒叙的,所以得反过来写 还有canvas改变的只是画布,并不影响内容。所以下面的...

  • 关于自定义View中Canvas中一些方法的理解

    1、Canvas.save();锁画布,保存之前画布的状态。2、Canvas.translate(10,10);把...

  • Canvas2D画线和面

    我们知道canvas是画布,今天我们就来画布上面画线和面。 1.Html中的画布 canvas是HTML5中的元素...

  • Android-UI控件

    手摸手教你写 Slack 的 Loading 动画 四步实现:画布旋转及线条变化动画(Canvas Rotate ...

  • 自定义view进阶篇《三》——Canvas之画布操作

    一、Canvas的常用操作速查表 二、Canvas基本操作 1.画布操作 为什么要有画布操作?画布操作可以帮助我们...

  • Canvas---画布

    (一) Canvas---画布The Canvas is the area that all UI element...

网友评论

      本文标题:canvas的画布变化

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