vue插件konva（canvas的便捷版）_konva中文文档-CSDN博客

本文链接：https://blog.csdn.net/vue6214/article/details/125170523

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Rect Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;
    //  创建舞台
    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    })
    // 创建图层
    var layer = new Konva.Layer()

    // 创建矩形
    var rect = new Konva.Rect({
      x: 10,
      y: 10,
      width:190,
      height: 100,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 1,
      shadowBlur: 10,
      cornerRadius: [0,35,0,5],
      draggable: true
    })
    // 圆
    var circle = new Konva.Circle({
      x: 1000,
      y: 100,
      radius: 80,
      fill: 'pink',
      stroke: 'black',
      strokeWidth: 1,
      shadowBlur: 10,
      cornerRadius: [0,35,0,5],
      draggable: true
    })
    // 椭圆
    var ellipse = new Konva.Ellipse({
      x: 100,
      y: 500,
      radiusX: 74,
      radiusY: 34,
      fill: 'pink',
      stroke: 'black',
      strokeWidth: 1,
      shadowBlur: 10,
      cornerRadius: [0,35,0,5],
      draggable: true
    })
    // 扇形
    var wedge = new Konva.Wedge({
      x: 100,
      y: 500,
      radius: 34,
      angle: 60,
      fill: 'pink',
      stroke: 'black',
      strokeWidth: 1,
      shadowBlur: 10,
      cornerRadius: [0,35,0,5],
      rotation: -10,
      draggable: true
    })
    // 多边形
    var line = new Konva.Line({
      points: [80,90,400,80,200,600,300,270,66,99],
      fill: 'pink',
      stroke: 'black',
      strokeWidth: 1,
      shadowBlur: 10,
      closed: true,
      draggable: true
    })
    var rectX = stage.width()
    var rectY = stage.height()
    var rect1 = new Konva.Rect({
      x: rectX,
      y: rectY,
      width:190,
      height: 100,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 1,
      shadowBlur: 10,
      cornerRadius: [0,35,0,5],
      draggable: true
    })
    rect.on('mouseover',function() {
      document.body.style.cursor = 'pointer';
    })
    rect.on('mouseout', function() {
        document.body.style.cursor = 'default';
      });
    layer.add(rect)
    layer.add(rect1)
    layer.add(circle)
    layer.add(ellipse)
    layer.add(wedge)
    layer.add(line)
    stage.add(layer)
    </script>
  </body>
</html>

简单的图形绘制，实现拖拽

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.title{

width: 100%;

height: 40px;

background: rgb(192, 185, 185);

}

ul {

list-style: none;