revised numbers are corrected
https://codepen.io/wanroulin/. is attached for reference
the main modified clips are inner circle rotation angle and number correction angle
// scale
ctx.setTransform(1, 0, 0, 1, Math.floor(W / 2), Math.floor(W / 2));
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
// there should be 10 lines
var stepAngle = (Math.PI * 2) / 10;
// begin angle
ctx.rotate(0.7 * Math.PI);
// draw only 9 of the 10 lines
for (var i = 0; i < 9; iPP) {
ctx.moveTo(Math.floor(W / 3) - 50, 0);
ctx.lineTo(Math.floor(W / 3) - 55, 0);
ctx.rotate(stepAngle);
}
ctx.stroke();
ctx.setTransform(1, 0, 0, 1, 0, 0);
// scale txt
ctx.fillStyle = 'rgba(255, 255, 255, .4)';
ctx.font = "1.5vh play";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var stepAngle = (Math.PI * 2) / 10;
var currentAngle = 0.20 * Math.PI;
for (i = 0; i < 9; iPP) {
// move to center, unrotated
ctx.setTransform(1, 0, 0, 1, Math.floor(W / 2), Math.floor(W / 2));
// set current rotation
ctx.rotate(currentAngle)
// move the context to our text's position
ctx.translate(0, Math.floor(W / 3) - 65);
// inverse rotate so we face North
ctx.rotate(-currentAngle);
// fill at 0,0
ctx.fillText(0 + 1 * i, 0, 0);
// increment currentAngle for next iteration
currentAngle += stepAngle;
}
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.restore();
Previous: Why did I update oh my zsh on May 21 and got it wrong?
Next: How to realize the function of video tag playing full screen and pausing display advertisement
After the putimagedata of canvas, the color value of rgba obtained by getimagedata is not correct < hr > let canvas = document.querySelector ( - sharpcanvas ); let cxt = canvas.getContext ( 2d ); let imageData = cxt.createImageData (2d2); for (...
canvas as the background, how to click div without passing the event to canvas The structure is as follows. Canvas writes a background, but there is a click monitor, changing the background with each click. There is also a click-to-refresh function in...