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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。