cnavas手绘图形库 : rough.js

时间 2019-12-06

标签 cnavas 绘图 rough.js rough 栏目 JavaScript 繁體版

原文原文链接

一个有趣的cnavas图形库:
https://roughjs.com/html

安装

根据官网:git

npm install --save roughjs

而后...........不会用了github

换个方法
在github上找到了对应的js文件
github地址: https://github.com/pshihn/rou...

下载到本地
导入到本身代码里

就能够用了

附代码:npm

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>rough canvas</title>
    <script src="rough.min.js"></script>
    <style>
      #myRoughCanvas{
        margin: 0 auto;
        border: 1px solid grey;
      }
    </style>
    <script>
      function showMouse(event){
        document.getElementById("x").innerHTML = event.offsetX;
        document.getElementById("y").innerHTML = event.offsetY;
      }
    </script>
  </head>
  <body>
    <div>
      <canvas id="myRoughCanvas" onmousemove="showMouse(event)" height="500px" width="500px"></canvas> 
    </div>
    <script>
      const ct = rough.canvas(document.getElementById("myRoughCanvas"));

      ct.rectangle(100,150,300,200,{
        fill : "grey",
        fillweight : 0,
        roughness : 3
      });
      ct.ellipse(175,210,40,30,{
        fill : "red",
        fillweight : 5
      });
      ct.ellipse(325,210,40,30,{
        fill : "red",
        fillweight : 5
      });
      
      //绘制三角形
      ct.path('M250 300,L225 225,L280 225,Z',{
        fill: 'red',
        fillweight: 3
      });

      ct.path('M200 150,L150 50');
      ct.path('M300 150,L350 50');
    </script>
    <p>x:<span id="x">0</span>y:<span id="y">0</span></p>
  </body>
</html>