Canvas

一、HTMLCancasElement

属性

EventTarget -> Node -> Element -> HTMLElement- > HTMLCanvasElement

一、HTMLElement继承的属性：

• height
• width

二、HTMLElement继承的方法：

• getContext()
  • 返回绘图上下文，不支持上下文ID，返回null
  • 参数2d、返回CanvasRenderingContext2D对象 ；
  • 参数‘webgl’、返回WebGLRenderingContext
• toDataURL()
  • canvas.toRataURL(type,encoderOptions)
  • type 图片类型 ，默认值image/png
    • crossorigin属性 ，anonymous（’’） use-credentials
  • encoderOptions指定格式为image/jpeg、image/webp，（0，1）区间选择图片质量
    • png是无损压缩图片格式，可ps编辑，jpg存在画质问题

• toBlob()

  • 创建一个Blob对象
  • canvas.Blob(callback，type，encoderOptions)
    • callback 回调函数 ，可以获得一个Blob的对象参数
      • URL对象
    • type,encoderOptions参数同toDataURL ```javascript canvas.toBlob(function(blob) { var newImg = document.createElement(“img”), url = URL.createObjectURL(blob);

  newImg.onload = function() { // no longer need to read the blob so it’s revoked URL.revokeObjectURL(url); };

  newImg.src = url; document.body.appendChild(newImg); }); ```

三、HTMLCanvasElment事件
addEventListener（）监听，都是webgl事件
webglcontextcreationerror、webglcontextlost、webglcontextrestored

自定义方法

HTMLCanvasElement.prototype.isSomeAlphaPixel = function () {
    var context = this.getContext('2d');
    // 获取图片像素信息
    var imageData = context.getImageData(0, 0, this.width, this.height).data;
    // 检测有没有透明数据
    var isAlphaBackground = false;
    for (var index = 3; index < imageData.length; index += 4) {
        if (imageData[index] != 255) {
            isAlphaBackground = true;
            break;    
        }
    }
    return isAlphaBackground;
};

CanvasRenderingContext2D

属性

参考

canvasAPI