zoukankan      html  css  js  c++  java

  • 画布


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

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

    效果图：


     

    代码：

    [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>  
  • 相关阅读:
    奔溃瞬间1
    面试知识点blog汇总
    贪心
    树 和 图
    DFS 和 BFS
    STL
    哈希表
    手写堆
    并查集
    二项式反演学习笔记
  • 原文地址：https://www.cnblogs.com/8834760y/p/5852975.html
Copyright © 2011-2022 走看看