canvas动态画圆示例

马黑黑 · 发表于 2024-3-31 23:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-3-31 23:51

代码：

<style>

#canv { display: block; margin: 20px auto; background: linear-gradient(tan, lightblue); }

</style>

let ctx = canv.getContext('2d');

let deg = 0, raf;

let drawCircle = (deg) => {

ctx.clearRect(0,0,200,200);

drawText(Math.floor(deg * 100 / 360) + '%');

ctx.save();

ctx.strokeStyle = 'rgba(56,104,32,.8)';

ctx.lineWidth = 8;

ctx.lineCap = 'round';

ctx.beginPath();

ctx.arc(100, 100, 90, 0, deg * Math.PI/180);

ctx.stroke();

ctx.restore();

};

let drawText = (text) => {

ctx.save();

ctx.strokeStyle = 'green';

ctx.font = 'normal 35px sans-serif';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

ctx.strokeText(text,100,100);

ctx.restore();

};

let render = () => {

drawCircle(deg);

deg += 0.5;

raf = requestAnimationFrame(render);

if(deg > 360) raf = cancelAnimationFrame(raf);

};

render();

canv.onclick = () => {

console.log(raf, deg);

if(raf) return;

deg = 0;

render();

};

</script>

马黑黑 · 发表于 2024-3-31 23:52

一楼，画完后，点击画布，会触发重绘事件

马黑黑 · 发表于 2024-4-1 00:04

绘制文本函数对文本的定位值得学习参考：
let drawText = (text) => {
      ctx.save();
      ctx.strokeStyle = 'green';
      ctx.font = 'normal 35px sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.strokeText(text,100,100);
      ctx.restore();
};

红色行：设置文本水平方向居中。它以文本开始的 x 坐标为界，一半在 x 的坐标，一半在 x 的右边；
红紫色行：设置文本垂直方向居中。此时，文本基线横穿文本（基线在坐标交叉点 o 即圆心往水平方向的延长线）；
蓝色行：绘制描边文本，参数 text 为要绘制的文本，（100，100）分别为文本绘制点的xy坐标值。

马黑黑 · 发表于 2024-4-1 00:04

绘制文本函数对文本的定位值得学习参考：
let drawText = (text) => {
ctx.save();
ctx.strokeStyle = 'green';
ctx.font = 'normal 35px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.strokeText(text,100,100);
ctx.restore();
};

红色行：设置文本水平方向居中。它以文本开始的 x 坐标为界，一半在 x 的坐标，一半在 x 的右边；
红紫色行：设置文本垂直方向居中。此时，文本基线横穿文本（基线在坐标交叉点 o 即圆心往水平方向的延长线）；
蓝色行：绘制描边文本，参数 text 为要绘制的文本，（100，100）分别为文本绘制点的xy坐标值。