我正在制作rolling_board。 （我附上了我的代码，你可以参考这个。）
这是我的问题：
我想在画布中给出没有旋转功能的文本度，因为旋转功能是旋转整个画布。
我试图转动整个电路板但由于必须修复箭头而放弃了。
出于这个原因，我必须转动板和除箭头之外的文本。我也想通过canvas而不是html来解决这个问题。
这是我的代码。它只会添加，删除和旋转。不是名字，颜色，百分比。
（非英语是韩语。如果您看到评论，结果可能会在不知道其含义的情况下理解。）
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>rolling_board</title>
<style>
*{margin: 0;padding: 0;box-sizing:border-box;color:#333;font-family: sans-serif;}
li{list-style:none;} a{text-decoration: none;color:inherit;}
.float:after{content:"";clear:both; display:table;}
.wrap{width : 400px; margin: 0 auto;}
.wrap-setting{width:100%;border:2px solid black;padding:10px;}
.box-setting{width:100%;height:90%;padding:10px;}
.btn-run{width:100%;height:40px;border:1px solid black; border-radius: 4px; background-color: #5a5a5a;color:white;cursor:pointer;}
.list-setting{padding:10px;}
.list-setting li{border-bottom:1px solid #363636;padding:4px;}
.list-input-name{width:100px;}
.list-input-num{width:40px;}
.list-input-color{width:25px;}
.btn-list-remove{width:20px;margin-left:7px; cursor:pointer;background: none;border:none;}
</style>
</head>
<body>
<div class="wrap float">
<canvas id="can" class="left"></canvas>
<form class="wrap-setting" id="form-setting" action="">
<div class="box-setting">
<div class="box-setting-setting">
<h3>setting</h3>
<button type="button" id="btn-list-add">add+</button>
</div>
<ul class="list-setting" id="list-setting"></ul>
</div>
<button id="run" class="btn-run" type="submit">rotate!</button>
</form>
</div>
<script type="text/javascript">
var c = document.getElementById("can");
var can = c.getContext("2d");
//attribute of circle board
var circle = new Array();
//size of board
var board_size = 400;
var quantity = 0;
var ai = 0;
var status = "true";
//draw arc
function arc(start,size,fill){
can.fillStyle = fill;
can.beginPath();
can.arc(0,0,board_size/2-10,start*Math.PI*0.02,(start+size)*Math.PI*0.02);
can.lineTo(0,0);
can.fill();
can.closePath();
//arrow
can.beginPath();
can.moveTo(-5,0-board_size/2);
can.lineTo(0,20-board_size/2);
can.lineTo(5,0-board_size/2);
can.fillStyle = "#434343";
can.fill();
can.closePath();
can.fillText("hello, world!",20,20);
}
//set board
function board_set(stac){
can.clearRect(0,0,board_size,board_size);
for(var i=0; i<circle.length;i++){
arc(stac,circle[i].size,circle[i].color);
stac += circle[i].size;
}
}
//rotate borad
function board_rotate(){
if(status == "false") return false;
status = "false";
var stac = 0;
var n = Math.floor(Math.random() * (8000-4000)+4000)/1000;
var a = setInterval(function(){
board_set(stac);
stac+=n;
n-=0.015;
if(n<0){
clearInterval(a);
board_set(stac);
status = "true";
}
},10);
return false;
}
//add list
function list_add(){
quantity++;
var li = document.createElement("li");
var name = document.createElement("input");
var num = document.createElement("input");
var color = document.createElement("input");
name.className = "list-input-name";
num.className = "list-input-num";
color.className = "list-input-color";
name.placeholder = "list"+(ai+1);
num.type = "number";
color.type = "color";
// name.required = "true";
// num.required = "true";
// color.required = "true";
num.max = "99";
num.min = "1";
/* random color */
var red = Math.floor(Math.random()*255).toString(16);
var green = Math.floor(Math.random()*255).toString(16);
var blue = Math.floor(Math.random()*255).toString(16);
red = red.length == 1 ? red = "0"+red : red;
green = green.length == 1 ? green = "0"+green : green;
blue = blue.length == 1 ? blue = "0"+blue : blue;
var rgb = "#"+red+green+blue;
color.value = rgb;
/* set name input */
var name_wrap = document.createElement("span");
var name_text = document.createTextNode("이름 : ");
name_wrap.appendChild(name_text);
name_wrap.appendChild(name);
name.onchange = function(){
console.log("color changed");
}
/* set percentage input */
var num_wrap = document.createElement("span");
var num_text = document.createTextNode(" 확률 : ");
num_wrap.appendChild(num_text);
num_wrap.appendChild(num);
/* set name color */
var color_wrap = document.createElement("span");
var color_text = document.createTextNode(" 색 : ");
color_wrap.appendChild(color_text);
color_wrap.appendChild(color);
/* set remove button */
var remove = document.createElement("button");
var remove_text = document.createTextNode("X");
remove.className = "btn-list-remove";
remove.id = "btn-list-remove";
remove.type = "button";
remove.appendChild(remove_text);
remove.onclick = function(){
if(quantity == 2) return;
var id = parseInt(li.getAttribute("data-index"));
for(var i = 0 ; i<circle.length; i++){
if(circle[i].index == id){
var size = circle[i].size;
circle.splice(i,1);
for(var j=0; j<circle.length;j++){
circle[j].size += size/circle.length;
}
}
}
li.remove();
quantity--;
board_set(0);
}
li.appendChild(name_wrap);
li.appendChild(num_wrap);
li.appendChild(color_wrap);
li.appendChild(remove);
ai++;
li.setAttribute("data-index",ai);
document.getElementById("list-setting").appendChild(li);
circle[quantity-1] = {size:20,color:rgb,index : ai};
circle_standard();
board_set(0);
}
function circle_standard(){
for(var i=0; i<circle.length; i++){
circle[i].size = 100/quantity
}
}
document.getElementById("form-setting").onsubmit = board_rotate;
window.onload = function(){
c.width = board_size;
c.height = board_size;
can.font = "20px Arial";
can.translate(board_size/2,board_size/2);
board_set(0); list_add(); list_add();
document.getElementById("btn-list-add").onclick = list_add;
}
</script>
</body>
</html>