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
    }
  • 相关阅读:
    经典算法之猴子吃桃
    VS2008C#Sqlserver2008数据库的连接以及增删改查
    在数组中随机插入数字且不重复
    菲波那切数列
    Js之AJAX
    经典算法之冒泡排序
    《Head First 设计模式》 第一章 设计模式入门
    Redis 的 IO 多路复用,学习研究
    高性能MySQL 第十章 复制 Part2
    高性能MySQL 第十一章 可扩展的MySQL
  • 原文地址:https://www.cnblogs.com/wpw1215/p/9256054.html
Copyright © 2011-2022 走看看