Question

我必须在javascript上执行一个程序，我必须手动选择x和y轴的范围。我的问题是我希望在我的画布上看到该范围，我该怎么做？

这是对我学校的考试，所以如果你能善意地向我解释你是如何做到的（如果有人想帮助我的话），我将非常感激。谢谢。

＆＃13;

function traccia(){
var miocanvas = document.getElementById("canvasprova");
var ctx = miocanvas.getContext("2d");
var height; var height;var xMax; var xMin; var yMax; var yMin;
var Ox, Oy,xr, yr;

height = parseInt(document.getElementById("canvasprova").getAttribute("height"));
width = parseInt(document.getElementById("canvasprova").getAttribute("width"));
xMax = parseFloat(document.getElementById('xmax').value);
xMin = parseFloat(document.getElementById('xmin').value);
yMax = parseFloat(document.getElementById('ymax').value);
yMin = parseFloat(document.getElementById('ymin').value);
var rangex = xMax-xMin;
var rangey = yMax-yMin;
//v = virtuale, c = coeff
var yv = parseFloat(document.getElementById('funzione').value);
var xv = xMin;
var cx = width/rangex;
var cy = height/rangey;
//o = origine
Ox = parseInt(cx * (-xMin));
Oy = height - parseInt(cy * (-yMin));
ctx.strokeStyle = "#ffffff";
// Y
	ctx.beginPath();
		ctx.moveTo(Ox, 0);
		ctx.lineTo(Ox, height);
	ctx.closePath();
	ctx.stroke();
// X
	ctx.beginPath();
		ctx.moveTo(0, Oy);
		ctx.lineTo(width,Oy);
	ctx.closePath();
	ctx.stroke();
//colorare il grafico di red
	ctx.strokeStyle = "#ff0000";



	//SENO
	ctx.beginPath();
		do
		{
			yv = Math.sin(xv);
			xr = Ox + Math.floor(xv * cx);
			yr = Oy - Math.floor(yv * cy);
			ctx.arc(xr, yr, 0, 0, 2*Math.PI);
			xv = xv + 0.01;
		}
		while (xv <= xMax);
		ctx.stroke();
	ctx.closePath();

	var H = parseFloat(0.0000001);

	ctx.strokeStyle = "#ff0000";

	xv = xMin; yv = yMin;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>CANVAS</title>
	<script type="text/javascript" src='script.js'></script>
	<style>
		table {
		    font-family: arial, sans-serif;
		    border-collapse: collapse;
		    width: 100%;
		}

		td, th {
		    border: 1px solid #ffffff;
		    text-align: center;
		    padding: 8px;
		}

		tr:nth-child(even) {
		    background-color: #ffffff
		}

		#wrapper
		{
			width: 800px;
			margin: auto;
			background-color: black;
		}

		body
		{
		    background-color: black;
		}
	</style>
</head>
<body>

	<div id="wrapper">
		<canvas id="canvasprova" width="500" height="300" style="border:3px solid #ffffff">
			
		</canvas>
        <table>
		<tr>
		<td style="color:red;"> X min: </td>
		<td><input type="text" id="xmin" value="-10"> </td>
		</tr>
		<tr>
		<td> X <b>MAX</b>:</td>
		<td><input type="text" id="xmax" value="10"></td>
		</tr>
		<tr>
		<td style="color:red;"> Y min:</td>
		<td><input type="text" id="ymin" value="-10"></td>
		</tr>
		<tr>
		<td> Y <b>MAX</b>:</td>
		<td><input type="text" id="ymax" value="10"></td>
		</tr>
		<tr>
		<td style="color:red;">Funzione:</td>
		<td><input type="text" value="sin(x)" id="funzione" disabled="disabled"></td>
		</tr>
		
		<tr>
		<td> </td>
			<td><input type="button" onclick="traccia();" value="Traccia" ></td>
		</tr>
		<table>
	</div>
	
</body>
</html>

＆＃13;

查看我的笛卡儿轴上的范围（Javascript）

0 个答案: