canvas的画布变化

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什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,187评论 2 32
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 13,619评论 1 4
  • 本文首发于我的个人博客:http://cherryblog.site/github项目地址:https://git...
    sunshine小小倩阅读 6,104评论 1 8
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,357评论 3 40
  • 当我们看到父母,身边的好友吵架或是闹矛盾的时候,总是免不了替他们难过着急,想去劝劝、调解调解,让他们有话好...
    心叶Yogi阅读 3,644评论 0 1