测试canvas巴拉巴拉巴拉

2015/04/02 34166
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Test Canvas</title>
  <script type="text/javascript">
    //alert("test");
    function loadfunction() {
      var canvas1 = document.getElementById("canvas1");
      var cnt = canvas1.getContext("2d");
      cnt.strokeStyle="#f00";
      for (var row=0; row<canvas1.height; row+=40) {
        cnt.beginPath();
        cnt.moveTo(0, row-0.5);
        cnt.lineTo(canvas1.width, row-0.5);
        cnt.stroke();
        cnt.textBaseLine = "bottom";
        cnt.fillText(row, 1, row);
      }
      for (var col=0; col<canvas1.width; col+=40) {
        cnt.beginPath();
        cnt.moveTo(col-0.5, 0);
        cnt.lineTo(col-0.5, canvas1.height);
        cnt.stroke();
        cnt.textBaseLine = "top";
        cnt.fillText(col, col-13, 10);
      }
      <!-- 画第一个矩形 -->
      var linearGradient = cnt.createLinearGradient(40, 40, 320, 320);
      linearGradient.addColorStop(0, "red");
      linearGradient.addColorStop(1, "green");
      cnt.fillStyle = linearGradient;
      cnt.fillRect(40, 40, 280, 280);
      <!-- drow the second rectangle -->
      var radialGradient = cnt.createRadialGradient(400, 120, 40, 480, 200, 10);
      cnt.fillStyle = radialGradient;
      radialGradient.addColorStop(0, "blue");
      radialGradient.addColorStop(1, "green");
      cnt.fillRect(320, 40, 520, 280);
      <!-- draw image -->
      cnt.drawImage(document.getElementById("img1"), 330, 210, 200, 160);
      cnt.drawImage(document.getElementById("img1"), 20, 20, 200, 200, 560, 80, 180, 180);
      <!-- get position -->
      navigator.geolocation.getCurrentPosition(function(position) {
        var coords = position.coords;
        alert("coords.latitude=" + coords.latitude
            + "coords.longtude=" + coords.longitude);
      });
    }
    window.onload=loadfunction;
  </script>
</head>
<body>
  <video width="320" height="240" controls="controls">
    <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
    <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <audio src="http://zhangmenshiting.baidu.com/data2/music/7326445/1066652158400128.mp3?xcode=ad33fe7e0ae7915d459154d0bf60649c90cd0cce97e572a6" controls="controls">
  </audio>
  <div class="div1">
    <canvas id="canvas1" width="800" height="400" style="border:1px solid">
    </canvas>
  </div>
  <img id="img1" src="http://bbs.szonline.net/UploadFile/album/UploadPic/2008_8/12/224/20080812163232_74848.jpg" width="250" height="200">
</body>
</html>
代码片段
