niantang-ALine
/
demo_canvas.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CLine 演示</title>
  <style>
    body{
      padding: 0;margin: 0;}
    h3{margin: 0;padding: 0;background: #efefef;line-height: 60px;height: 60px;color: #666;font-size: 22px;text-indent: 20px;}
    dl{margin:10px 20px;}
    dl dt{line-height: 40px;font-family:"微软雅黑";}
    dl dd h5{font-weight: 600;font-size:14px;}
    dl dd pre{background: #ddd;padding: 5px;border-radius: 10px;}
    ul{margin-left: 0;}
    ul li{list-style: none;line-height: 3;}
    .demo{background-color:#efefef;position:relative;}
  </style>
  <script src="src/jquery.min.js" type="text/javascript"></script>
  <script src="src/CLine.js" type="text/javascript"></script>
</head>
<body>
<h3>CLine画线、标注插件</h3>

<dl>
  <dt>
    演示1.简单演示
  </dt>
  <dd>
      <canvas id="demo1" width="400" height="300" class="demo"></canvas>
    <script type="text/javascript">
      var demo1 = new CLine('demo1');
      //demo1.init({color:'#666'}).angleLine(50,50,200,200).show();
        demo1.drawLine(10,10,100,100).drawLine(300,75,80,170,{width:5,color:'red'}).show();
    </script>
  </dd>
  <dd>
    <h5>代码</h5>
        <pre>
        </pre>
  </dd>
</dl>


</body>
</html>