zoukankan      html  css  js  c++  java
  • 在worker中使用offscreenCanvas

    HTML为

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>worker基本使用</title>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
        <button onclick="click()"></button>
    </body>
    <script>
      var offscreen = null;
      var worker = new Worker('offscreencanvas.js')
      function click () {
          if(offscreen == null){
              var htmlCanvas = document.getElementById('myCanvas')
              offscreen = htmlCanvas.ControlToOffscreen()
          }
          worker.postMessage({canvas:offscreen},[offscreen])
      }
    </script>
    </html>

    Js代码为

    var x = 50;
    var y = 50;
    var offCanvas = null;
    onmessage = function(evt){
        if(offCanvas === null){
            offCanvas = evt.data.canvas
        } else{
            if(offCanvas == evt.data.canvas){
                console.log('offCanvas == evt.data.canvas')
            } else {
                console.log('offCanvas != evt.data.canvas')
            }
        }
        gl = offCanvas.getContext('webgl');
        gl.viewport(0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        gl.enable(gl.SCLSSOR_TEST);
        gl.scissor(y, x, 60, 60);
        gl.clearColor(1.0, 0.0, 0.0, 1.0)//red
        gl.clear(gl.COLOR_BUFFER_BIT)
        gl.commit()
        x +=10
        y += 10
    }
  • 相关阅读:
    在过滤器中验证接口中的Token
    导出EXCEL的 两个方法
    调用webservice接口,返回xml(String)转义
    时间类的操作
    jvm 内存解析以及jvm调优
    redis springMVC 配置与应用
    题目2 成绩排序
    题目1 排序
    题目1042:Coincidence
    题目1131:合唱队形
  • 原文地址:https://www.cnblogs.com/wpw1215/p/9256054.html
Copyright © 2011-2022 走看看