html5——canvas绘图
html5 2017-01-18 09:19:12
XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <!-- saved from url=(0036)http://localhost:55699/WebForm1.aspx -->  
  3. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>  
  4.   
  5. </title></head>  
  6. <body>  
  7. <form method="post" action="./WebForm1.aspx_files/WebForm1.aspx.htm" id="form1">  
  8.     <div style="height: 77px; margin-left: 40px">  
  9.         <input name="TextBox1" type="text" id="TextBox1" style="height:26px;width:444px;">  
  10.         <input id="btn_search" style="height: 30px;width:80px" type="button" value="搜索"></div>  
  11. </form>  
  12.   
  13. <div>  
  14.     <p style="font:14px 微软雅黑;color:#f000ff">Canvas操作测试</p>  
  15.     <img id="img1" style="display:none" src="http://www.runoob.com/images/img_the_scream.jpg" width="100" height="300"/>  
  16. </div>  
  17. <div>  
  18.     <button id="btn1" style="height:26px;width:82px;" onclick="onBtn1()">点击画线</button>  
  19.     <button id="btn2" style="height:26px;width:82px;" onclick="onBtn2()">填充</button>  
  20.     <button id="btn2" style="height:26px;width:82px;" onclick="onBtn3()">文字</button>  
  21.     <button id="btn2" style="height:26px;width:82px;" onclick="onBtn4()"></button>  
  22.     <button id="btn2" style="height:26px;width:82px;" onclick="onBtn5()">绘图</button>  
  23. </div>  
  24. <div>  
  25.     <p style="font:14px;color:#f000ff">Canvas显示:</p>  
  26. </div>  
  27. <div>  
  28.     <canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">  
  29. </div>  
  30. </canvas>  
  31.   
  32. <script>  
  33.     function onBtn1()  
  34.     {  
  35.         var canvas = document.getElementById("myCanvas");  
  36.         var ctx = canvas.getContext("2d");  
  37.         ctx.lineWidth = 2;  
  38.         ctx.moveTo(0, 0);  
  39.         ctx.lineTo(100, 100);  
  40.         ctx.stroke();  
  41.     }  
  42.   
  43.     function onBtn2()  
  44.     {  
  45.         var canvas = document.getElementById("myCanvas");  
  46.         var ctx = canvas.getContext("2d");  
  47.         ctx.fillStyle = "#ff00f0";  //设置填充颜色  
  48.         ctx.fillRect(0, 0, 20, 20); //填充区域  
  49.     }  
  50.   
  51.     function onBtn3()  
  52.     {  
  53.         var canvas = document.getElementById("myCanvas");  
  54.         var ctx = canvas.getContext("2d");  
  55.         ctx.font = "16px 微软雅黑"; //设置绘制字体  
  56.         ctx.fillStyle = "#ff0000";  //设置绘制文字的颜色  
  57.         ctx.fillText("Hello world!", 20, 60);  
  58.         //绘制空心字  
  59.         ctx.strokeText("Hello world!", 40, 60);  
  60.     }  
  61.   
  62.     function onBtn4()  
  63.     {  
  64.         var canvas = document.getElementById("myCanvas");  
  65.         var ctx = canvas.getContext("2d");  
  66.         //绘制圆形  
  67.         ctx.beginPath();  
  68.         ctx.lineWidth = "1px";  
  69.         ctx.arc(50, 50, 20, 0, 2 * Math.PI);  
  70.         ctx.stroke();   //绘制线条  
  71.         //填充圆形  
  72.         ctx.fillStyle = "#00a000";  
  73.         ctx.beginPath();  
  74.         ctx.arc(100, 50, 20, 0, 2 * Math.PI);  
  75.         ctx.fill();     //填充线条内部区域  
  76.     }  
  77.   
  78.     function onBtn5()  
  79.     {  
  80.         var canvas = document.getElementById("myCanvas");  
  81.         var ctx = canvas.getContext("2d");  
  82.         //绘制图片的两种方式,无缩放  
  83.         //1、加载DOM中的img标签  
  84.         var img = document.getElementById("img1");  
  85.   
  86.         ctx.drawImage(img, 0, 100);  
  87.         //2、加载已知链接的图片  
  88.         var img1 = new Image(100, 300);  
  89.         img1.src = "http://avatar.csdn.net/6/6/B/1_mfcing.jpg";  
  90.         ctx.drawImage(img1, img.naturalWidth + 10, 100);    //naturalWidth图片的原始尺寸  
  91.   
  92.         //缩放绘制  
  93.         ctx.drawImage(img, 0, 0, 30, 90);   //缩放图片尺寸到 30*90  
  94.   
  95.         //只绘制部分区域  
  96.         ctx.drawImage(img, 0, 0, 100, 100, 60, 0, 90, 90);  //绘制图片的 (0,0,100,100)这个区域到 (60,0,150,150)这个区域  
  97.     }  
  98. </script>  
  99.   
  100. </body></html>  

 

本文来自于:http://www.yoyo88.cn/study/html5/69.html

Powered by yoyo苏ICP备15045725号