吴裕雄--天生自然PHP-MySQL-JavaScript学习笔记：HTML5音频和视频

其他 2020-02-29 15:34:13 阅读次数: 0 
<!DOCTYPE html>
<html>
  <head>
    <title>Drawing Arcs</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='480'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.lineWidth    = 2
      context.strokeStyle  = 'blue'

      Math.degreesToRadians = function(degrees)
      {
        return degrees * Math.PI / 180
      }

      // Following is the original example code
      //
      // arcs =
      // [
      //   Math.PI,
      //   Math.PI * 2,
      //   Math.PI / 2,
      //   Math.PI / 180 * 59
      // ]
      //
      // Below the code now uses degrees as arguments

      arcs =
      [
        Math.degreesToRadians(180),
        Math.degreesToRadians(360),
        Math.degreesToRadians(90),
        Math.degreesToRadians(59)
      ]

      for (j = 0 ; j < 4 ; ++j)
      {
        context.beginPath()
        context.arc(80 + j * 160, 80, 70, 0, arcs[j])
        context.closePath()
        context.stroke()
      }
      
      context.strokeStyle = 'red'

      for (j = 0 ; j < 4 ; ++j)
      {
        context.beginPath()
        context.arc(80 + j * 160, 240, 70, 0, arcs[j])
        context.stroke()
        context.closePath()
      }

      context.strokeStyle = 'green'

      for (j = 0 ; j < 4 ; ++j)
      {
        context.beginPath()
        context.arc(80 + j * 160, 400, 70, 0, arcs[j], true)
        context.stroke()
        context.closePath()
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Clipping Areas (b)</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='480'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.fillStyle    = 'white'
      context.strokeRect(20, 20, 600, 440) // Black border
      context.fillRect(  20, 20, 600, 440) // White background

      context.beginPath()

      for (j = 0 ; j < 10 ; ++j)
      {
        context.moveTo(20,  j * 48)
        context.lineTo(620, j * 48)
        context.lineTo(620, j * 48 + 30)
        context.lineTo(20,  j * 48 + 30)
      }

      context.clip()
      context.closePath()

      context.fillStyle   = 'blue'         // Blue sky
      context.fillRect(20, 20,  600, 320)
      context.fillStyle   = 'green'        // Green grass
      context.fillRect(20, 320, 600, 140)
      context.strokeStyle = 'orange'
      context.fillStyle   = 'yellow'

      orig   = 170
      points = 21
      dist   = Math.PI / points * 2
      scale1 = 130
      scale2 = 80
 
      context.beginPath()

      for (j = 0 ; j < points ; ++j)
      {
        x = Math.sin(j * dist)
        y = Math.cos(j * dist)
        context.lineTo(orig + x * scale1, orig + y * scale1)
        context.lineTo(orig + x * scale2, orig + y * scale2)
      }

      context.closePath()
      context.stroke()                     // Sun outline
      context.fill()                       // Sun fill
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Clipping Areas (a)</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='480'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')

      context.beginPath()

      for (j = 0 ; j < 10 ; ++j)
      {
        context.moveTo(20,  j * 48)
        context.lineTo(620, j * 48)
        context.lineTo(620, j * 48 + 30)
        context.lineTo(20,  j * 48 + 30)
      }

      context.stroke()
      context.closePath()
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Filling a Path</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='320' height='320'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.strokeStyle  = 'orange'
      context.fillStyle    = 'yellow'

      orig   = 160
      points = 21
      dist   = Math.PI / points * 2
      scale1 = 150
      scale2 = 80
 
      context.beginPath()

      for (j = 0 ; j < points ; ++j)
      {
        x = Math.sin(j * dist)
        y = Math.cos(j * dist)
        context.lineTo(orig + x * scale1, orig + y * scale1)
        context.lineTo(orig + x * scale2, orig + y * scale2)
      }

      context.closePath()
      context.stroke()
      context.fill()
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Drawing Lines</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='535' height='360'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.fillStyle    = 'red'
      context.font         = 'bold 13pt Courier'
      context.strokeStyle  = 'blue'
      context.textBaseline = 'top'
      context.lineWidth    = 20
      caps                 = ['butt',  'round', 'square']
      joins                = ['round', 'bevel', 'miter']

      for (j = 0 ; j < 3 ; ++j)
      {
        for (k = 0 ; k < 3 ; ++k)
        {
          context.lineCap  = caps[j]
          context.lineJoin = joins[k]

          context.fillText(' cap:' + caps[j],  33 + j * 180, 45 + k * 120)
          context.fillText('join:' + joins[k], 33 + j * 180, 65 + k * 120)

          context.beginPath()         
          context.moveTo( 20 + j * 180, 100 + k * 120)
          context.lineTo( 20 + j * 180,  20 + k * 120)
          context.lineTo(155 + j * 180,  20 + k * 120)
          context.lineTo(155 + j * 180, 100 + k * 120)
          context.stroke()
          context.closePath()
        }
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Filling Text</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='800' height='160'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      context.font         = 'bold 140px Times'
      context.textBaseline = 'top'
      image                = new Image()
      image.src            = 'wicker.jpg'

      image.onload = function()
      {
        pattern           = context.createPattern(image, 'repeat')
        context.fillStyle = pattern
        context.fillText(  'WickerpediA', 0, 0)
        context.strokeText('WickerpediA', 0, 0)
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Using Text</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='800' height='160'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      context.font         = 'bold 140px Times'
      context.textBaseline = 'top'
      context.strokeText('WickerpediA', 0, 0)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Pattern Fill</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      
      image     = new Image()
      image.src = 'image.png'

      image.onload = function()
      {
        pattern           = context.createPattern(image, 'repeat')
        context.fillStyle = pattern
        context.fillRect(20, 20, 600, 200)
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>A Stretched Radial Gradient</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
 
      gradient = context.createRadialGradient(0, 120, 0, 480, 120, 480)
      gradient.addColorStop(0.00, 'red')
      gradient.addColorStop(0.14, 'orange')
      gradient.addColorStop(0.28, 'yellow')
      gradient.addColorStop(0.42, 'green')
      gradient.addColorStop(0.56, 'blue')
      gradient.addColorStop(0.70, 'indigo')
      gradient.addColorStop(0.84, 'violet')

      context.fillStyle = gradient
      context.fillRect(20, 20, 600, 200)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>A Radial Gradient</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
 
      gradient = context.createRadialGradient(320, 120, 0, 320, 120, 320)
      gradient.addColorStop(0.00, 'red')
      gradient.addColorStop(0.14, 'orange')
      gradient.addColorStop(0.28, 'yellow')
      gradient.addColorStop(0.42, 'green')
      gradient.addColorStop(0.56, 'blue')
      gradient.addColorStop(0.70, 'indigo')
      gradient.addColorStop(0.84, 'violet')

      context.fillStyle = gradient
      context.fillRect(20, 20, 600, 200)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Color Stops</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
 
      gradient = context.createLinearGradient(0, 0, 640, 0)
      gradient.addColorStop(0.00, 'red')
      gradient.addColorStop(0.14, 'orange')
      gradient.addColorStop(0.28, 'yellow')
      gradient.addColorStop(0.42, 'green')
      gradient.addColorStop(0.56, 'blue')
      gradient.addColorStop(0.70, 'indigo')
      gradient.addColorStop(0.84, 'violet')

      context.fillStyle = gradient
      context.fillRect(20, 20, 600, 200)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Different Gradient Angles</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
 
      gradient = context.createLinearGradient(0, 0, 160, 0)
      gradient.addColorStop(0, 'white')
      gradient.addColorStop(1, 'black')
      context.fillStyle = gradient
      context.fillRect(20, 20, 135, 200)

      gradient = context.createLinearGradient(0, 0, 0, 240)
      gradient.addColorStop(0, 'yellow')
      gradient.addColorStop(1, 'red')
      context.fillStyle = gradient
      context.fillRect(175, 20, 135, 200)

      gradient = context.createLinearGradient(320, 0, 480, 240)
      gradient.addColorStop(0, 'green')
      gradient.addColorStop(1, 'purple')
      context.fillStyle = gradient
      context.fillRect(330, 20, 135, 200)

      gradient = context.createLinearGradient(480, 240, 640, 0)
      gradient.addColorStop(0, 'orange')
      gradient.addColorStop(1, 'magenta')
      context.fillStyle = gradient
      context.fillRect(485, 20, 135, 200)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Filling with Gradients</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.fillStyle    = 'blue'
      context.strokeStyle  = 'green'

      context.fillRect(  20, 20, 600, 200)
      context.clearRect( 40, 40, 560, 160)
      context.strokeRect(60, 60, 520, 120)
 
      gradient = context.createLinearGradient(0, 80, 640,80)
      gradient.addColorStop(0, 'white')
      gradient.addColorStop(1, 'black')
      context.fillStyle = gradient
      context.fillRect(80, 80, 480,80)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Drawing Rectangles</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.fillStyle    = 'blue'
      context.strokeStyle  = 'green'

      context.fillRect(  20, 20, 600, 200)
      context.clearRect( 40, 40, 560, 160)
      context.strokeRect(60, 60, 520, 120)
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Copying a 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>

    <img id='myimage'>

    <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()

      S('myimage').border = '1px solid black'
      O('myimage').src    = canvas.toDataURL()
    </script>
  </body>
</html>
<!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>
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>Skewing</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='500' height='140'></canvas>
    
    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      myimage     = new Image()
      myimage.src = 'image.png'

      myimage.onload = function()
      {
        context.drawImage(myimage,  20, 20)
        context.transform(1, 0, 1, 1, 0, 0)
        context.drawImage(myimage, 140, 20)
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Rotating (b)</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='500' height='140'></canvas>
    
    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      myimage     = new Image()
      myimage.src = 'image.png'

      myimage.onload = function()
      {
        w = myimage.width
        h = myimage.height

        for (j = 0 ; j < 4 ; ++j)
        {
          context.save()
          context.translate(20 + w / 2 + j * (w + 20), 20 + h / 2)

          // Alternative to the above using transform()
          // context.transform(1, 0, 0, 1, 20 + w / 2 + j * (w + 20), 20 + h / 2)

          context.rotate(Math.PI / 5 * j)
          context.drawImage(myimage, -(w / 2), -(h / 2))
          context.restore()
        }
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Rotating (a)</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='500' height='280'></canvas>
    
    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      myimage     = new Image()
      myimage.src = 'image.png'

      myimage.onload = function()
      {
        for (j = 0 ; j < 4 ; ++j)
        {
          context.drawImage(myimage, 20 + j * 120 , 20)
          context.rotate(Math.PI / 25)
        }
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Scaling</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='420' height='200'></canvas>
    
    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      myimage     = new Image()
      myimage.src = 'image.png'

      myimage.onload = function()
      {
        context.drawImage(myimage, 0, 0)
        context.scale(3, 2)
        
        // Alternative to above using transform()
        // context.transform(3, 0, 0, 2, 0, 0)

        context.drawImage(myimage, 40,   0)
        context.scale(.33, .5)
        context.drawImage(myimage,  0, 100)

        // Improved version using save() and restore()
        //
        // context.drawImage(myimage, 0, 0)
        // context.save()
        // context.scale(3, 2)
        // context.drawImage(myimage, 40, 0)
        // context.restore()
        // context.drawImage(myimage, 0, 100)
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Compositing</title>
    <script src='OSC.js'></script>
    <style>
      .compositing {
        font-family:'courier new';
        font-size  :9pt;
      }
    </style>
  </head>
  <body>
    <div class='compositing'>
      <canvas class='canvas' id='c1'  width='120' height='120'></canvas>
      <canvas class='canvas' id='c2'  width='120' height='120'></canvas>

      <canvas class='canvas' id='c3'  width='120' height='120'></canvas>
      <canvas class='canvas' id='c4'  width='120' height='120'></canvas>
      <br>
      &nbsp;&nbsp; source-over &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      source-in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; source-out
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; source-atop<br>

        
      <canvas class='canvas' id='c5'  width='120' height='120'></canvas>
      <canvas class='canvas' id='c6'  width='120' height='120'></canvas>
      <canvas class='canvas' id='c7'  width='120' height='120'></canvas>
      <canvas class='canvas' id='c8'  width='120' height='120'></canvas>
      <br>
      destination-over &nbsp; destination-in &nbsp;&nbsp;&nbsp;
      destination-out &nbsp; destination atop<br>

      <canvas class='canvas' id='c9'  width='120' height='120'></canvas>
      <canvas class='canvas' id='c10' width='120' height='120'></canvas>
      <canvas class='canvas' id='c11' width='120' height='120'></canvas>
      <canvas class='canvas' id='c12' width='120' height='120'></canvas>
      <br>
      &nbsp;&nbsp;&nbsp; &nbsp;lighter
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; darker
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      &nbsp;copy &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;xor
    </div>
    
    <script>
      image     = new Image()
      image.src = 'image.png'

      image.onload = function()
      {
        types =
        [
          'source-over',     'source-in',        'source-out',
          'source-atop',     'destination-over', 'destination-in',
          'destination-out', 'destination-atop', 'lighter',
          'darker',          'copy',             'xor'
        ]

        for (j = 0 ; j < 12 ; ++j)
        {
          canvas               = O('c' + (j + 1))
          context              = canvas.getContext('2d')
          S(canvas).background = 'lightblue'
          context.fillStyle    = 'red'

          context.arc(50, 50, 50, 0, Math.PI * 2, false)
          context.fill()
          context.globalCompositeOperation = types[j]
          context.drawImage(image, 20, 20, 100, 100)
        }
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Manipulating Image Data</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='640' height='200'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      myimage     = new Image()
      myimage.src = 'photo.jpg'

      myimage.onload = function()
      {
        context.drawImage(myimage, 0, 0)
        idata = context.getImageData(0, 0, myimage.width, myimage.height)

        for (y = 0 ; y < myimage.height ; ++y)
        {
          for (x = 0 ; x < myimage.width ; ++x)
          {
            pos     = y * myimage.width * 4 + x * 4
            average =
            (
              idata.data[pos]     +
              idata.data[pos + 1] +
              idata.data[pos + 2]
            ) / 3

            idata.data[pos]     = average + 50
            idata.data[pos + 1] = average
            idata.data[pos + 2] = average - 50
          }
        }
        context.putImageData(idata, 320, 0)
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Adding Shadows</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='480' height='190'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      myimage     = new Image()
      myimage.src = 'apple.png'

      orig   = 95
      points = 21
      dist   = Math.PI / points * 2
      scale1 = 75
      scale2 = 50

      myimage.onload = function()
      {
        context.beginPath()

        for (j = 0 ; j < points ; ++j)
        {
          x = Math.sin(j * dist)
          y = Math.cos(j * dist)
          context.lineTo(orig + x * scale1, orig + y * scale1)
          context.lineTo(orig + x * scale2, orig + y * scale2)
        }

        context.closePath()

        context.shadowOffsetX = 5
        context.shadowOffsetY = 5
        context.shadowBlur    = 6
        context.shadowColor   = '#444'
        context.fillStyle     = 'red'
        context.stroke()
        context.fill()

        context.shadowOffsetX = 2
        context.shadowOffsetY = 2
        context.shadowBlur    = 3
        context.shadowColor   = 'yellow'
        context.font          = 'bold 36pt Times'
        context.textBaseline  = 'top'
        context.fillStyle     = 'green'
        context.fillText('Sale now on!', 200, 5)

        context.shadowOffsetX = 3
        context.shadowOffsetY = 3
        context.shadowBlur    = 5
        context.shadowColor   = 'black'
        context.drawImage(myimage, 245, 45)
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Drawing Images</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='480' height='260'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      myimage     = new Image()
      myimage.src = 'image.png'

      myimage.onload = function()
      {
        context.drawImage(myimage,                 20,  20          )
        context.drawImage(myimage,                140,  20, 220, 220)
        context.drawImage(myimage,                380,  20,  80, 220)
        context.drawImage(myimage, 30, 30, 40, 40, 20, 140, 100, 100)

        // Example of using a canvas as an image source
        context.drawImage(canvas, 0, 0, 480, 260,  20, 140, 100, 100)
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bezier Curves</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='480' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      context.beginPath()
      context.moveTo(240, 20)
      context.bezierCurveTo(720, 480, -240, -240, 240, 220)
      context.stroke()
      context.closePath()
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Quadratic Curves</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='480' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'

      context.beginPath()
      context.moveTo(180, 60)
      context.quadraticCurveTo(240,   0, 300,  60)
      context.quadraticCurveTo(460,  30, 420, 100)
      context.quadraticCurveTo(480, 210, 340, 170)
      context.quadraticCurveTo(240, 240, 200, 170)
      context.quadraticCurveTo(100, 200, 140, 130)
      context.quadraticCurveTo( 40,  40, 180,  60)
      context.fillStyle = 'white'
      context.fill()
      context.closePath()

      // Illustrate the attractor points
      // IE, Chrome, Opera only

      // context.beginPath()
      // context.moveTo(240,   0)
      // context.lineTo(460,  30)
      // context.lineTo(480, 210)
      // context.lineTo(240, 240)
      // context.lineTo(100, 200)
      // context.lineTo( 40,  40)
      // context.closePath()
      // context.setLineDash([2,3])
      // context.strokeStyle = 'green'
      // context.stroke()
     
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>The arcTo Method</title>
    <script src='OSC.js'></script>
  </head>
  <body>
    <canvas id='mycanvas' width='480' height='240'></canvas>

    <script>
      canvas               = O('mycanvas')
      context              = canvas.getContext('2d')
      S(canvas).background = 'lightblue'
      context.strokeStyle  = 'blue'

      for (j = 0 ; j <= 280 ; j += 40)
      {
        context.beginPath()
        context.moveTo( 20, 20)
        context.arcTo(240, 240, 460, 20, j)
        context.lineTo(460, 20)
        context.stroke()
        context.closePath()
      }    
    </script>
  </body>
</html>

猜你喜欢

转载自www.cnblogs.com/tszr/p/12383042.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022