用HTML5 Canvas为Web图形创建特效

作者: 嗫?暁雲?
来源: 51数据库
2022-09-21

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//Global variables
      var myImage =
new Image(); // Create a new blank image.
      
      // Load the image and display it.
      function displayImage() {

        //
Get the canvas element.
        canvas = document.getElementById("myCanvas");

        // Make sure you got it.
        if (canvas.getContext) {

          // Specify 2d canvas type.
          ctx = canvas.getContext("2d");

          // When the image is loaded, draw it.
          myImage.onload =
function() {

            // Load the image into the context.
            ctx.drawImage(myImage, 0, 0);

            //
Get
and modify the image data.
            changeImage();
          }

          // Define the source of the image.
          myImage.src =
"http://samples.msdn.microsoft.com/workshop/samples/canvas/kestral.png";
        }
      }

      function changeImage() {

        ctx.strokeStyle =
"white";
        ctx.lineWidth =
"100";
        ctx.beginPath();
        ctx.arc(100, 100, 150, 0, Math.PI *
2, true);
        ctx.closePath();
        ctx.stroke();
      }
    </script>
</head>
<body onload="displayImage()">
<h1>
      American Kestral
    </h1>
<p>
      The original image is
on the left
and the modified image is
on the right.
    </p>
<img id="myPhoto" src="http://samples.msdn.microsoft.com/workshop/samples/canvas/kestral.png">
<canvas id="myCanvas" width="200" height="200">
</canvas>
<p>
Public domain image courtesy of U.S. Fish and Wildlife Service.
    </p>
</body>
</html>

推荐阅读