javascript - 如何在画布窗口内放置画布绘图
问题描述
var $canvasDiv = $('#canvasdiv');
var canvas = document.getElementById("mycanvas");
var c = canvas.getContext("2d");
var c1 = canvas.getContext("2d");
canvas.height = $canvasDiv.innerHeight();
canvas.width = $canvasDiv.innerWidth();
c.font = "15px Arial";
function degToRad(angle){
var pi = Math.PI;
return angle * (pi/180);
}
function crtanjeGrede(l)
{
var oslonac1 = parseInt(l) + 30;
c.beginPath();
c.fillRect(30,30,l,5); //pravougaonik koji pocinje na x30 y30, duzine l koja je unos i debljine 5
c.beginPath();
c.moveTo(oslonac1,35);
c.lineTo(oslonac1 + 25,45);
c.lineTo(oslonac1 - 25,45);
c.lineTo(oslonac1,35);
c.moveTo(oslonac1 + 25, 50);
c.lineTo(oslonac1 - 25, 50);
c.stroke();
c.beginPath();
c.moveTo(30,35);
c.lineTo(55,45);
c.lineTo(5,45);
c.lineTo(30,35);
c.moveTo(30, 70);
c.lineTo(30, 400);
c.moveTo(oslonac1 , 70);
c.lineTo(oslonac1 , 400);
c.moveTo(30, 120);
c.lineTo(oslonac1, 120);
c.fillText("Fa",5,124);
c.moveTo(30, 190);
c.lineTo(oslonac1,190);
c.fillText("Ft",5,194);
c.moveTo(30, 270);
c.lineTo(oslonac1, 270);
c.fillText("Ma",5,274);
c.closePath();
c.strokeStyle = 'black';
c.stroke();
}
// ako je pravac true znaci da je po Y, false je po x
// ako je smer true znaci da je na poz stranu, false je na negativnu
function crtanjeSile(n, pravac, smer)
{
//pravac
if (pravac){
var naptka = parseInt(n) + 30;
if (smer){
c.beginPath();
c.moveTo(naptka , 24);
c.lineTo(naptka + 3, 16);
c.lineTo(naptka - 3 , 16);
c.lineTo(naptka , 24);
c.fillStyle ="#000000";
c.fill();
c.beginPath();
c.moveTo(naptka , 0);
c.lineTo(naptka , 25);
c.stroke();
c.closePath();
} else {
c.beginPath();
c.moveTo(naptka , 41);
c.lineTo(naptka + 3, 49);
c.lineTo(naptka - 3 , 49);
c.lineTo(naptka , 41);
c.fillStyle ="#000000";
c.fill();
c.beginPath();
c.moveTo(naptka, 41);
c.lineTo(naptka, 66);
c.stroke();
c.closePath();
}
}else{
}}
function crtanjeSile1(b, pravac1, smer1){
if(pravac1){
var naptka = parseInt(b) + 30;
if(smer1 == false){ //treba samodorada da li se sila crta iznad ili ispod X ose
//var naptka = parseInt(n) + 30;
c.beginPath(); //strelica nadesno
c.moveTo(naptka - 1, 25);
c.lineTo(naptka - 9, 22);
c.lineTo(naptka - 9, 28);
c.lineTo(naptka - 1, 25);
c.fillStyle ="#000000";
c.fill();
c.beginPath();
c.moveTo(naptka - 1, 25);
c.lineTo(naptka - 26, 25);
c.strokeStyle = 'black';
c.stroke();
c.closePath()
}else{
c.beginPath(); //strelica u levo
c.moveTo(naptka + 1 , 40);
c.lineTo(naptka + 9 , 37);
c.lineTo(naptka + 9 , 43);
c.lineTo(naptka + 1 , 40);
c.fillStyle ="#000000";
c.fill();
c.beginPath();
c.moveTo(naptka + 1, 40);
c.lineTo(naptka + 26, 40);
c.stroke();
c.closePath();
}
}else{
c.beginPath();
c.closePath();
}
}
//crtanje gerbera je bilo ovde
function aksijalnesile(l, a, intX, X){ //crtanje aksijalnih sila
var polaznatka = parseInt(l) + 30;
var duzina = parseInt(a) + 30;
if(pravac1){
if(smer1){
c.beginPath();
c.moveTo(polaznatka, 120);
//c.fillRect(polaznatka,120,duzina - polaznatka, -10); ova funkcija radi isto
c.lineTo(polaznatka, 110);
c.lineTo(duzina, 110);
c.lineTo(duzina, 120);
c.closePath();
c.fill();
c.textAlign = 'center';
c.fillText(intX.toFixed(2), polaznatka, 105);
c.textAlign = 'end';
c.fillText(intX.toFixed(2), duzina - 2, 105);
c.stroke();
}else{
c.beginPath();
c.moveTo(polaznatka, 120);
c.lineTo(polaznatka, 130);
c.lineTo(30, 130);
c.lineTo(30, 120);
c.closePath();
c.fill();
c.textAlign = 'center';
c.fillText(intX.toFixed(2), polaznatka, 145);
c.textAlign = 'start';
//c.fillText(intX.toFixed(2), 30 + 1, 135);
c.stroke();
}
}else{
}
}
function transverzalnesile(l, a, intY, Y){ //crtanje transverzalnih sila
var polaznatka = parseInt(l) + 30;
var duzina = parseInt(a) + 30;
if(pravac){
if(smer){
c.beginPath();
c.moveTo(polaznatka, 190);
c.lineTo(polaznatka, 180);
c.lineTo(30, 180);
c.lineTo(30, 190);
c.closePath();
c.fill();
c.textAlign = 'center';
c.fillText(intY.toFixed(2), polaznatka, 215);
c.textAlign = 'start';
//c.fillText(intX.toFixed(2), 30 + 1, 135);
c.stroke();
}else{
c.beginPath();
c.moveTo(polaznatka, 190);
//c.fillRect(); ova funkcija radi isto
c.lineTo(polaznatka, 180);
c.lineTo(duzina, 180);
c.lineTo(duzina, 190);
c.closePath();
c.fill();
c.textAlign = 'center';
c.fillText(intY.toFixed(2), polaznatka, 175);
c.textAlign = 'end';
c.fillText(intY.toFixed(2), duzina - 2, 175);
c.stroke();
}
}else{
}
}
$("#sub").click(function() {
//debugger;
var duzina = $("#Duzina").val();
var inten = $("#inten").val();
var naptka = $("#naptka").val();
var napugao = $("#napugao").val();
var gerber1 = $("#gerber1").val();
var gerber2 = $("#gerber2").val();
var inten = parseInt(inten , 10);
var napugao = parseInt(napugao, 10 );
var intX = inten * Math.cos(degToRad(napugao)).toFixed(3); // funkcija .toFixed() zaokruzuije na 3 decimale da bi sin 0 bio 0, a ne !=0
if (intX !== 0){
pravac1 = true;
if (intX > 0){
smer1 = true;
}else{
smer1 = false;
}
}else{
pravac1 = false;
}
crtanjeSile1(naptka, pravac1, ); //skinut parametar smer1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var intY = inten * Math.sin(degToRad(napugao)).toFixed(3); // funkcija .toFixed() zaokruzuije na 3 decimale da bi sin 0 bio 0, a ne !=0
if (intY !== 0){
pravac = true;
if (intY > 0){
smer = true;
}else{
smer = false;
}
//crtanjeSile(naptka, pravac, smer);
}else{
pravac = false;
}
crtanjeSile(naptka, pravac, smer);
var Y = inten * Math.sin(degToRad(napugao)).toFixed(3);
var X = inten * Math.cos(degToRad(napugao)).toFixed(3);
var a = parseInt(naptka) + 30;
function move(y, naptka)
{
c.beginPath();
c.moveTo(naptka + 30, y + 50);
c.lineTo(naptka + 50, y + 50);
c.stroke();
}
crtanjeGrede(duzina);
move(Y, naptka);
aksijalnesile(naptka, duzina, intX, X);
transverzalnesile(naptka, duzina, intY, Y);
});* {
margin: 0;
padding: 0;
}
#logo{
border-radius: 10px;
padding: 1px;
}
.gore{
background-color: black;
width: 100%;
padding: 3px;
color: white;
margin: 0;
margin-top: 0;
}
.unos{
margin-top: 20px;
padding: 3px;
width: 80%;
margin: 0 auto;
height: auto;
}
.unos2{
margin-top: 20px;
}
form{
width: 500px;
margin: 0 auto;
}
.imput{
width= 100%;
}
.forma{
padding: 3px;
}
input{
margin-top: 4px;
}
.floutleft{
display: block;
margin: 0 auto;
}
.sire{
width: 300px;
}
.tr{
width: 150px;
}
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
}<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="gore">
<img src="logo.jpg" id="logo" alt="logo masinca" width="60" height="60">
</div>
<center>
<form action="" class="unos">
<table class="unos2">
<tr><td style>duzina grede [mm]:</td> <td><input type="text" name="Duzina" id="Duzina" placeholder="duzina grede" ></td></tr>
<tr><td>intenzitet sile [N]:</td> <td><input type="text" name="inten" id="inten" placeholder="intenzitet sile"></td></tr>
<tr><td>napadna tacka [mm]:</td> <td><input type="text" name="naptka" id="naptka" placeholder="napadna tacka" ></td></tr>
<tr><td>napadni ugao [°]:</td> <td><input type="text" name="napugao" id="napugao" placeholder="napadni ugao" ></td></tr>
</table>
<table>
<td><input class="" type="button" name="sub" id="sub" value="Draw" class="imput"></td>
</table>
</form>
<div id="canvasdiv" class="unos3" style="margin: 5px; height: 80%; width: 80%;">
<canvas id="mycanvas" style="border: none;"></canvas>
</div>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>我需要帮助我的图像适合 html 页面中的画布宽度。我将画布宽度定义为 100%，但 div 宽度为 80%（见图），并且画布内的图像由用户在 HTML 中定义。
绘图的宽度可以是 10 像素，但也可以是 1000 像素，我想将它放在所需的画布内，以便它可以在任何定义的宽度下可见（不是太小，但不足以超过所需的宽度，如图所示第二张图）
如果我可以单独进行缩放，那将是最好的，这样我就可以固定侧面元素的大小（在第三张图片上用红色四舍五入）并且只使用蓝色元素进行操作（参见第三张图片）。
解决方案
推荐阅读
- python - 如何在 MacOS 上阅读通知
- android - 命令 .copyto 失败
- python - 导出到 csv 时如何跳过 \n 符号？
- python - django后台任务间隔（毫秒）
- postgresql - Travis CI 忽略 Postgres 版本规范
- composer-php - 具有别名的作曲家：无法打开输入文件
- java - 在抽屉外单击时Android导航抽屉不会关闭（主要活动中的片段）
- tensorflow - 使用 word2vec 进行电子邮件分类
- amazon-web-services - awscli列出ownerid创建的所有对象？
- python - 按日期将行透视到列 pandas