0
私はゲージコントロールの一種を作っています。 ゲージコントロールは、テキストボックスから値を取得して調整する必要があります。 （ボタン付きだが、それ以降のもの）javascriptのテキストボックスに値を入力してください
問題は、JavaScriptの変数のテキストボックスから値を取得できないことです。これには何か機能がありますか？
変数は、 "VAR度" であり、現在ここで250
のランダムな値を持っているが、私のコードです：
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css" />
<script>
window.onload = function() {
//canvas initialization
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//dimensions
var W = canvas.width;
var H = canvas.height;
//Variables
var degrees = 250;
//var new_degrees = 0;
var difference = 0;
var color = "lightgreen";
var bgcolor = "#222";
var text;
var animation_loop, redraw_loop;
function init() {
//Clear the canvas everytime a chart is drawn
ctx.clearRect(0, 0, W, H);
//Background 360 degree arc
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 30;
ctx.arc(W/2, H/2, 100, 0, Math.PI * 2, false); //you can see the arc now
ctx.stroke();
//gauge will be a simple arc
//Angle in radians = angle in degrees * PI/180
var radians = degrees * Math.PI/180;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 30;
//the arc will start from the topmost end
ctx.arc(W/2, H/2, 100, 0 - 90 * Math.PI/180, radians - 90 * Math.PI/180, false);
ctx.stroke();
//Lets add the text
ctx.fillStyle = color;
ctx.font = "50px bebas";
text = Math.floor(degrees/360 * 100) + "%";
//Lets center the text
//deducting half of text width from position x
text_width = ctx.measureText(text).width;
//adding manual value to position y since the height of the text cannot
//be measured easily. There are hacks but we will keep it manual for now.
ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
}
function draw() {
//Cancel any movement animation if a new chart is requested
if (typeof animation_loop != undefined) clearInterval(animation_loop);
////random degree from 0 to 360
//new_degrees = Math.round(Math.random() * 360);
//difference = new_degrees - degrees;
////This will animate the gauge to new positions
////The animation will take 1 second
////time for each frame is 1sec/difference in degrees
animation_loop = setInterval(animate_to, 1000/difference);
}
//function to make the chart move to new degrees
function animate_to() {
//clear animation loop if degrees reaches to new_degrees
if (degrees == new_degrees)
// clearInterval(animation_loop);
if (degrees < new_degrees)
degrees++;
else
degrees--;
init();
}
//add some animation
draw();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Lets make a gauge chart using canvas and js -->
<canvas id="canvas" width ="300" height="300"></canvas>
<asp:TextBox ID="TextBox1" runat="server">0</asp:TextBox>
</form>
var degrees = document.querySelector（ "[id $ = 'TextBox1']"）。値; – Lain
ありがとう！それは私の問題を解決しました:) –