canvas转盘文环形!ui给的效果图如下
公司要的急只能在网上找了改,对canvas一点都不熟~
从网上下下来改的只能做成这样
现在只能做成这样
那块的原始代码如下,
链接描述
不会canvas根本不知道如何下手
是要在在转盘里面画一个环嘛?
先上一下,效果图。
接着是代码。
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
;(() => {
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const deg = Math.PI / 180;
ctx.beginPath();
ctx.arc(150,150,150, 2 * Math.PI, 0);
ctx.stroke();
//看这里!我是用来 translate 的代码!!!
ctx.translate(150, 150);
const strs = new Array(12).fill("我是乱写的测试文字");
const angel = 360 / 12 * Math.PI / 180;
strs.forEach((str) => {
ctx.fillText(str, 30, 5);
//看这里!!我是用来 rotate 代码!!!
ctx.rotate(angel);
});
})();
</script>
其实就两样东西来解决这个问题。
首先是旋转 rotate。
写一行字,旋转一下画布,然后在旋转。
第二样东西就是 translate。
因为画布的旋转是以左上角为基点的,这跟我们的预期不一样。
我们的预期是以center为中心,旋转。
所以需要用translate移动一下。
done.