阴影中的曙光

H5游戏了解一下?

2018.09.14 / 技术相关 / 点击 162 / 回复 0 / Canvas

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

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像素而变成两像素宽。

1px

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