vue使用canvas绘制360°方向盘
<template>
<div class="main">
<div class="huahu">
<canvas id="myCanvas" width="800" height="800"></canvas>
</div>
</div>
</template>
<script>
export default {
name: "Main",
data() {
return {};
},
mounted() {
var list = [{}];
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "15px sans-serif";
ctx.fillStyle = "green";
ctx.translate(c.width / 2, c.height / 2);
var radius = 300;
for (var n = 0; n < 36; n++) {
var theta = ((n - 9) * (Math.PI * 2)) / 36;
var x = radius * Math.cos(theta);
var y = radius * Math.sin(theta);
ctx.fillText(n * 10, x, y);
}
ctx.restore();
},
methods: {}
};
</script>
<style lang="less" scoped>
.main {
width: 100%;
height: 100%;
position: relative;
.huahu {
width: 800px;
height: 800px;
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-500px, 400px);
}
}
</style>