代码改变世界

画布

2016-09-08 14:36  袁叶子  阅读(186)  评论(0)  编辑  收藏  举报


学习整理的笔记，内容丰富

有绘制矩形，绘制线条，绘制二次贝塞尔曲线，绘制弧线等。知识点在代码注释中

效果图：


 

代码：

 

[html]view plaincopyprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>canvas 教程</title>  
  6.         <style>  
  7.             canvas{background: #F9F9F9;border:1px solid #000;}  
  8.             .one,.two,.thr,.four{float:left;margin-left: 200px;}  
  9.               
  10.         </style>  
  11.         <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>  
  12.         <script>  
  13.             $(function(){  
  14.                 // 创建2d的画图环境  
  15.                 var canvas_2d = document.getElementById("canvas-test").getContext("2d");  
  16.                 // fillRect()  绘制“被填充”的矩形 /  前两个数是坐标，后两个是像素大小  
  17.                 canvas_2d.fillRect(0,0,100,100);  
  18.                 // strokeRect() 绘制矩形（无填充）  
  19.                 canvas_2d.strokeRect(100,0,100,100);  
  20.                 // fillStyle  设置或返回用于填充绘画的颜色、渐变或模式  
  21.                 canvas_2d.fillStyle = "rgba(0,0,0,0.8)";  
  22.                 // strokeStyle  设置或返回用于笔触的颜色、渐变或模式  
  23.                 canvas_2d.strokeStyle = "cadetblue";  
  24.                 // shadowColor  设置或返回用于阴影的颜色  
  25.                 canvas_2d.shadowColor = "rgba(3,3,3,0.6)"  
  26.                 // shadowBlur  设置或返回用于阴影的模糊级别  
  27.                 canvas_2d.shadowBlur = 10;  
  28.                 // shadowOffsetX  设置或返回阴影距形状的水平距离  
  29.                 canvas_2d.shadowOffsetX = 4;  
  30.                 // shadowOffsetY  设置或返回阴影距形状的垂直距离  
  31.                 canvas_2d.shadowOffsetY = 4;  
  32.                 canvas_2d.fillRect(200,0,100,100);  
  33.                 canvas_2d.strokeRect(300,0,100,100);  
  34.                   
  35.                 // createLinearGradient()  创建线性渐变。前两个是渐变起点坐标，后两个便是结束坐标  
  36.                 var linearGradient = canvas_2d.createLinearGradient(100,100,100,200);  
  37.                 // addColorStop()  规定渐变对象中的颜色和停止位置  
  38.                 linearGradient.addColorStop(0,"#000");  
  39.                 linearGradient.addColorStop(1,"#eee");  
  40.                 canvas_2d.fillStyle = linearGradient;  
  41.                 canvas_2d.fillRect(100,100,100,100);  
  42.                 // createRadialGradient()  创建放射状/环形的渐变。每三个为一组，前两个是坐标后一个是半径  
  43.                 var radialGradient = canvas_2d.createRadialGradient(350,150,40,350,150,80);  
  44.                 radialGradient.addColorStop(0,"#eee");  
  45.                 radialGradient.addColorStop(1,"#000");  
  46.                 canvas_2d.fillStyle = radialGradient;  
  47.                 canvas_2d.fillRect(300,100,100,100);  
  48.                 // createPattern()  在指定的方向上重复指定的元素这个我就不试了  
  49.                   
  50.                 /*---------------------one-----------分割线------------two-----------------------*/  
  51.                   
  52.                 var $canvas_line = document.getElementById("canvas-line");  
  53.                 var canvas_2d_line = $canvas_line.getContext("2d");  
  54.                 $canvas_line.onmousedown=function  (e) {  
  55.                    var startx=e.layerX;  
  56.                    var starty=e.layerY;  
  57.                    // moveTo(x,y) 开始绘制一条直线，指定线条的起点  
  58.                    canvas_2d_line.moveTo(startx,starty);  
  59.                    $canvas_line.onmousemove=function  (e) {  
  60.                          var endx=e.layerX;  
  61.                          var endy=e.layerY;  
  62.                          // lineTo(x1,y1) 指定直线要到达的位置  
  63.                          canvas_2d_line.lineTo(endx,endy);  
  64.                          // stroke() 绘制路径  
  65.                          canvas_2d_line.stroke();  
  66.                    }  
  67.                    $canvas_line.onmouseup=function  () {  
  68.                         $canvas_line.onmousemove=null;  
  69.                         $canvas_line.onmouseup=null;  
  70.                        }  
  71.                     }  
  72.                 /*  
  73.                 lineCap  设置或返回线条的结束端点样式  
  74.                     butt:向线条的每个末端添加平直的边缘 缺省  
  75.                     round:向线条的每个末端添加圆形线帽。  
  76.                     square:向线条的每个末端添加正方形线帽，效果不明显  
  77.                 lineJoin  设置或返回两条线相交时，所创建的拐角类型  
  78.                     miter:创建尖角; 缺省  
  79.                     bevel:创建斜角。  
  80.                     round:创建圆角。  
  81.                 lineWidth  设置或返回当前的线条宽度  
  82.                     number:当前线条的宽度，以像素计  
  83.                 miterLimit  设置或返回最大斜接长度  
  84.                     number:正数。规定最大斜接长度.5  
  85.                 斜接长度指的是在两条线交汇处内角和外角之间的距离  
  86.                 只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效  
  87.                 */  
  88.                 canvas_2d_line.lineWidth=10;  
  89.                 canvas_2d_line.lineCap="round";  
  90.                 canvas_2d_line.moveTo(10,10);  
  91.                 canvas_2d_line.lineTo(150,10);  
  92.                 canvas_2d_line.stroke();  
  93.                   
  94.             /*------------------two--------------分割线---------------thr--------------------*/  
  95.               
  96.             // beginPath()：开始一条路径，或重置当前的路径。  
  97.             // closePath()：创建从当前点到开始点的路径，关闭当前的绘图路径  
  98.                var canvas_radial=document.getElementById("canvas-radial");  
  99.                var canvas_2d_radial=canvas_radial.getContext("2d");  
  100.                // 绘制二次贝塞尔曲线 三部曲 quadraticCurveTo 前两个是贝塞尔左边，后两个是结束坐标  
  101.                //canvas_2d_radial.moveTo(50,100);  
  102.                //canvas_2d_radial.quadraticCurveTo(200,200,300,100);  
  103.                //canvas_2d_radial.stroke();  
  104.                canvas_radial.onmousedown=function  (e) {  
  105.                     var startx=e.layerX;  
  106.                     var starty=e.layerY;  
  107.                    
  108.                  canvas_radial.onmouseup=function  (e) {  
  109.                     var endx=e.layerX;  
  110.                     var endy=e.layerY;  
  111.                  canvas_radial.onmousemove=function  (e) {  
  112.                     canvas_2d_radial.clearRect(0,0,400,400);  
  113.                     var conx=e.layerX;  
  114.                     var cony=e.layerY;  
  115.                     canvas_2d_radial.beginPath();  
  116.                     canvas_2d_radial.moveTo(startx,starty);  
  117.                     canvas_2d_radial.quadraticCurveTo(conx,cony,endx,endy);  
  118.                     canvas_2d_radial.stroke();  
  119.                     }  
  120.                  }  
  121.                }  
  122.                // arc(x坐标,y坐标,r半径,开始角度,结束角度,false逆时针/true顺时针);创建弧/曲线（用于创建圆或部分圆)  
  123.                var canvas_2d_arc=canvas_radial.getContext("2d");  
  124.                canvas_2d_arc.arc(100,100,30,0,Math.PI/2,false);  
  125.                canvas_2d_arc.stroke();  
  126.                  
  127.                /*------------------thr--------------分割线---------------four--------------------*/  
  128.                 
  129.                 var canvas=document.getElementById("canvas-is-path");  
  130.                 var canvas_2d_is_path=canvas.getContext("2d");  
  131.                 canvas_2d_is_path.arc(200,200,50,0,2*Math.PI);  
  132.                 canvas_2d_is_path.stroke();  
  133.                 var angle=0;  
  134.                 canvas.onclick=function  (e) {  
  135.                     var mx=e.layerX;  
  136.                     var my=e.layerY;  
  137.                     // isPointInPath(x,y) 返回 true，说明指定的点位于当前路径中,反之不在  
  138.                     if(canvas_2d_is_path.isPointInPath(mx,my)){  
  139.                         setInterval(function  () {  
  140.                             // 清除画布 和 beginPath();连用  
  141.                             canvas_2d_is_path.clearRect(0,0,400,400);  
  142.                             angle+=0.2;  
  143.                             canvas_2d_is_path.beginPath();  
  144.                             canvas_2d_is_path.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI);  
  145.                             canvas_2d_is_path.stroke();  
  146.                         },50);  
  147.                     }  
  148.                }  
  149.             });  
  150.         </script>  
  151.     </head>  
  152.     <body>  
  153.         <section class="one">  
  154.             <hgroup>  
  155.                 <h2>canvas 教程</h2>  
  156.                 <h3>画矩形</h3>  
  157.             </hgroup>  
  158.             <canvas width="400" height="400" id="canvas-test">  
  159.                 您需要更新浏览器呢 凸^-^凸  
  160.             </canvas>  
  161.         </section>  
  162.         <section class="two">  
  163.             <hgroup>  
  164.                 <h2>canvas 教程</h2>  
  165.                 <h3>点击开始画线 / 路径(线条)修饰</h3>  
  166.             </hgroup>  
  167.             <canvas width="400" height="400" id="canvas-line">  
  168.                 您需要更新浏览器呢 凸^-^凸  
  169.             </canvas>  
  170.         </section>  
  171.         <section class="thr">  
  172.             <hgroup>  
  173.                 <h2>canvas 教程</h2>  
  174.                 <h3>绘制二次贝塞尔曲线(点击鼠标滑动) / 绘制弧线</h3>  
  175.             </hgroup>  
  176.             <canvas width="400" height="400" id="canvas-radial">  
  177.                 您需要更新浏览器呢 凸^-^凸  
  178.             </canvas>  
  179.         </section>  
  180.         <section class="four">  
  181.             <hgroup>  
  182.                 <h2>canvas 教程</h2>  
  183.                 <h3>脉动 （点击圆内）</h3>  
  184.             </hgroup>  
  185.             <canvas width="400" height="400" id="canvas-is-path">  
  186.                 您需要更新浏览器呢 凸^-^凸  
  187.             </canvas>  
  188.         </section>  
  189.     </body>  
  190. </html>