清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!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>