1.0.2 • Published 2 years ago
zero-shape v1.0.2
zero-shape
使用说明
安装
npm install zero-shape代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>ZeroShape</title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="background:#f0f0f0;"></canvas>
<div>
<button id="remove">清空画布</button>
<button id="rect">画矩形</button>
<button id="polygon">多边形</button>
<button id="circle">圆形</button>
</div>
</body>
<script type="module">
import ZeroShape from 'zero-shape';
const zeroShape = new ZeroShape('canvas')
zeroShape.start()
// 添加一个圆形
let circle = new ZeroShape.Circle()
circle.strokeStyle = 'yellow'
circle.fillStyle = '#efd888'
circle.arc(100, 100, 20, 20)
zeroShape.addShape(circle)
document.querySelector('#remove').addEventListener('click', () => {
zeroShape.clear()
})
document.querySelector('#rect').addEventListener('click', () => {
zeroShape.initEvent('rectangle')
})
document.querySelector('#polygon').addEventListener('click', () => {
zeroShape.initEvent('polygon')
})
document.querySelector('#circle').addEventListener('click', () => {
zeroShape.initEvent('circle')
})
</script>
</html>