• 吴裕雄--天生自然PHP-MySQL-JavaScript学习笔记:HTML5画布


    <!DOCTYPE html>
    <html> <!-- geolocation.html -->
      <head>
        <title>Geolocation Example</title>
      </head>
      <body>
        <script>
          if (typeof navigator.geolocation == 'undefined')
             alert("Geolocation not supported.")
          else
            navigator.geolocation.getCurrentPosition(granted, denied)
    
          function granted(position)
          {
            var lat = position.coords.latitude
            var lon = position.coords.longitude
            
            alert("Permission Granted. You are at location:
    
    "
              + lat + ", " + lon +
              "
    
    Click 'OK' to load Google Maps with your location")
    
            window.location.replace("https://www.google.com/maps/@"
              + lat + "," + lon + ",14z")
          }
    
          function denied(error)
          {
            var message
    
            switch(error.code)
            {
              case 1: message = 'Permission Denied'; break;
              case 2: message = 'Position Unavailable'; break;
              case 3: message = 'Operation Timed Out'; break;
              case 4: message = 'Unknown Error'; break;
            }
    
            alert("Geolocation Error: " + message)
          }
        </script>
      </body>
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <title>HTML5 Video</title>
      </head>
      <body>
        <video width='560' height='320' controls>
          <source src='movie.mp4'  type='video/mp4'>
          <source src='movie.webm' type='video/webm'>
          <source src='movie.ogv'  type='video/ogg'>
        </video>
      </body>
    </html>
    function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
    function S(i) { return O(i).style                                            }
    function C(i) { return document.getElementsByClassName(i)                    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>The HTML5 Canvas</title>
        <script src='OSC.js'></script>
      </head>
      <body>
        <canvas id='mycanvas' width='320' height='240'>
          This is a canvas element given the ID <i>mycanvas</i>
          This text is only visible in non-HTML5 browsers
        </canvas>
        <script>
          canvas            = O('mycanvas')
          context           = canvas.getContext('2d')
          context.fillStyle = 'red'
          S(canvas).border  = '1px solid black'
    
          context.beginPath()
          context.moveTo(160, 120)
          context.arc(160, 120, 70, 0, Math.PI * 2, false)
          context.closePath()
          context.fill()
        </script>
      </body>
    </html>
  • 相关阅读:
    wabpack 多页面 react配置 (对比单页面)
    vue-router+nginx非根路径的配置方法
    Vue-Devtools快速安装配置教程
    C++字符串
    NSIS插件制作
    HOOK学习
    排序:数组置顶元素(将数组某个元素排到第一位)
    raect hook中使用防抖(debounce)和节流(throttle)
    浏览器的缓存机制
    JavaScript踩坑解构赋值
  • 原文地址:https://www.cnblogs.com/tszr/p/12383005.html
Copyright © 2020-2023  润新知