• canvas新属性


    lineCap默认值是butt,还有aquare,round

    使用:context.lineCap="butt"

    lineJoin

    miter是默认

    还可以是round,bevel

    此处又会涉及到另一个属性,context.miterLimit

    默认miterLimit是10,当超过10时,会以bevel的形式显现,那么什么是miterLimit呢?具体计算是有些复杂的,因为线是有宽度的,而miterllimit 指的是真正的顶端距离有宽度所产生的尖端点之间的距离值

    下面介绍canvas图形绘制的图形变换

    图形变换一般指translate,scale,rotate三种

    //context.save();

    context.fillStyle=green;

    context.fillRect(0,0,200,200);

    context.translate(100,100);

    //context.restore();

    context.fillStyle=red;

    context.fillRect(0,0,200,200);

    context.translate(200,200);

    运行结果发现红色矩形位移了300,300,这时就需要使用context.save();context.restore()来保存和恢复状态

    当然,canvas还有transform和setTransform属性,可以不使用translate,scale等,就可以达到效果,setTransform为了恢复改变形状之前的状态。

    那么transform(1,0,0,1,100,100)和setTransform都有6个参数,这里涉及到了变幻矩阵,而这a,b,c,d,e,f 六个参数分别代表:水平缩放,水平倾斜,垂直倾斜,垂直缩放,水平平移,垂直平移

  • 相关阅读:
    MySql学习
    python学习笔记
    关于字符编码的理解
    session与cookie
    常用的表单元素
    Linq基础
    发送邮件。。
    进程与线程
    winform知识点集合
    winform基础与简单的窗体
  • 原文地址:https://www.cnblogs.com/openflyme/p/4823533.html
Copyright © 2020-2023  润新知