Canvas

作者: TOKdawn | 来源:发表于2018-12-20 10:56 被阅读0次

    所以说一个人的命运啊,当然要靠自我奋斗,但是也要考虑到历史的行程。

    canvas

    • Canvas 元素具有两套尺寸,一个是元素本身的大小(页面中canvas这个DOM节点占用的面积,实际的物理占用面积,由CSS调控),还有一个是元素绘图表面的大小(Canvas画布的可以容纳Canvas元素的面积,即绘图层的逻辑占用面积,在声明Canvas画布的时候指定),当这两个大小不一致的时候就会把绘图表面大小缩放后兼容到Canvas元素本身大小。所以如果CSS设置的大小大于Canvas指定大小则最终呈现会等比例放大,反之等比例缩小。

    Canvas原生属性
    width / height :Canvas绘图表面长宽
    getContext() : 返回Canvas元素相关的绘图环境对象
    toDataURL(type, quality) :返回一个数据地址可用做img标签的src属性。接受图像类型参数和图像质量参数
    toBlob(): 创建一个用于此canvas元素图像文件的Blob. 浏览器会以一个指向blob的引用为参数调用回调函数。后两个参数类型同上

    canvse
    • 储存Canvas状态 ,controlContext.save();和controlContext.restore();这两个方法可以嵌套使用,采用栈储存机制;
    • 左键拖拉框选实现:定义一个DIV元素,用于实现橡皮筋式选取框,初始状态为空并且display: none 。当用户拖动鼠标时,应用程序会将第二个div设置为可见,继续拖动的时候动态更改其大小。
    • Canvas绘制线段的时候主要使用moveTo和lineTo方法,但是要绘制一像素宽的线段的时候要绘制横向线段时Y轴需要为某数值.5 绘制纵向线段的时候需要X轴为某数值.5 否则绘制出的的线会因为.5像素补全为1像素而变成两像素宽。

    应该是坑掉了0(:3 」∠ )

    相关文章

      网友评论

          本文标题:Canvas

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