独具匠心

Appearance

前端工具库 ​

1、手绘风格的canvas ​

rough：手绘风格的图形库。可以让你用素描、类似手绘的风格来绘制图形 🐈‍⬛ 源码

javascript
<script setup>
import { ref, onMounted } from 'vue'
import rough from 'roughjs'
const canvas = ref(null)
onMounted(() => {
  initCanvas()
})
function initCanvas() {
  const rc = rough.canvas(canvas.value)
  console.log(rc)
  rc.circle(50, 50, 80, { fill: 'red' })
  rc.rectangle(120, 15, 80, 80, { fill: 'red' })
  rc.circle(50, 150, 80, {
    fill: 'rgb(10,150,10)',
    fillWeight: 3 // thicker lines for hachure
  })
  rc.rectangle(220, 15, 80, 80, {
    fill: 'red',
    hachureAngle: 60, // angle of hachure,
    hachureGap: 8
  })
  rc.rectangle(120, 105, 80, 80, {
    fill: 'rgba(255,0,200,0.2)',
    fillStyle: 'solid' // solid fill
  })
  rc.line(80, 120, 300, 100) // x1, y1, x2, y2
}
</script>
<script setup>
import { ref, onMounted } from 'vue'
import rough from 'roughjs'
const canvas = ref(null)
onMounted(() => {
  initCanvas()
})
function initCanvas() {
  const rc = rough.canvas(canvas.value)
  console.log(rc)
  rc.circle(50, 50, 80, { fill: 'red' })
  rc.rectangle(120, 15, 80, 80, { fill: 'red' })
  rc.circle(50, 150, 80, {
    fill: 'rgb(10,150,10)',
    fillWeight: 3 // thicker lines for hachure
  })
  rc.rectangle(220, 15, 80, 80, {
    fill: 'red',
    hachureAngle: 60, // angle of hachure,
    hachureGap: 8
  })
  rc.rectangle(120, 105, 80, 80, {
    fill: 'rgba(255,0,200,0.2)',
    fillStyle: 'solid' // solid fill
  })
  rc.line(80, 120, 300, 100) // x1, y1, x2, y2
}
</script>

示例