如何使用canvas在单页中绘制三个三角形？

2024-01-07

function areaval() {
    var equation = $('#number').val();
    var secod = $('#acure').val();
    var thrd = $('#pmet').val();
    var frd = $('#cmet').val();
    var a = Math.abs(parseInt(equation * secod) );
    var d = Math.abs(a/2);
    document.getElementById("result").innerHTML = "Area=(1/2)*b*h<br><br>A="+d+"cm2";
    document.getElementById("step4.1").innerHTML = "step1=(1/2)*"+equation+"*"+secod;
    var f= Math.abs(parseInt(equation) + parseInt(thrd) + parseInt(frd));
    document.getElementById("result2.2").innerHTML = "Perimeter=a+b+c<br><br>P="+f+"cm2";
    document.getElementById("step4.6").innerHTML = "step2="+equation+"+"+thrd+"+"+frd; 
    $('input').val('');
    return false;
}

function rightang() {
    var givenone = $('#oppsite').val();
    var giventwo = $('#adjacent').val();
    var giventhree = $('#hyper').val();
    var givenhig = $('#hidgt').val();
    var agive = Math.abs(parseInt(givenone * givenhig) );
    var ragive = Math.abs((agive)/2);
    document.getElementById("raitresult").innerHTML = "Area=(1/2)*b*h<br><br>A="+ragive+"cm2";
    document.getElementById("step5.1").innerHTML = "step1=(1/2)*"+givenone+"*"+givenhig;
    var subperi = Math.abs((2*givenone)+(2*giventwo));
    var rtsub = Math.sqrt(subperi);
    var srtadd = Math.floor(parseInt(givenone)+parseInt(giventwo));
    var finres = Math.floor(parseInt(rtsub)+parseInt(srtadd));
    document.getElementById("periresult2").innerHTML = "Perimeter=a+b+c<br><br>P="+finres+"cm2";
    document.getElementById("step5.5").innerHTML = "step2="+givenone+"+"+giventwo+"+"+giventhree;
    var hysid = Math.floor(parseInt(finres)/parseInt(giventwo));
    var hyang = Math.abs(2*parseInt(hysid));
    document.getElementById("periresult3").innerHTML = "Angle of a=A*2/b<br><br>angle="+hyang+"degree";
    document.getElementById("step5.8").innerHTML = "step3="+hysid+"*"+"2"+"/"+givenone;
    $('input').val('');
    return false;
}

function obtuseang() {
    var oppavall = $('#oppsite6').val();
    var oppbval = $('#oppsite7').val();
    var obtont = $('#oppsite1').val();
    var obttwo = $('#oppsite2').val();
    var obttriagle = Math.abs(parseInt(obtont * obttwo ) );
    var obtval = Math.abs((obttriagle)/2);
    document.getElementById("raitresult43").innerHTML = "Area=(1/2)*b*h<br><br>A="+obtval+"cm2";
    document.getElementById("step6.1").innerHTML = "step1=(1/2)*"+obtont+"*"+obttwo;
    var obtperi = Math.abs(parseInt(oppavall)+parseInt(oppbval)+parseInt(obtont));
    document.getElementById("obtuseresult").innerHTML = "Perimeter=a+b+c<br><br>P="+obtperi+"cm2";
    document.getElementById("stepfine").innerHTML = "step2="+oppavall+"+"+oppbval+"+"+obtont;
    $('input').val('');
    return false;
}

#equilateral-try {
    width: 0;
    height: 0;
    border-left: 128px solid transparent;
    border-right: 48px solid transparent;
    border-bottom: 95px solid black;
    position:absolute;
    top:100px;
    left:100px;
}

#coverbox {
    position:absolute;
    top:calc(8%);
    left:calc(3%);
    width:300px;
    height:500px;
}

#equilateral-try:after {
    width: 100%;
    height: 100%;
    border-left: 110px solid transparent;
    border-right: 40px solid transparent;
    content: "";
    border-bottom: 80px solid #fff;
    position:absolute;
    top:10px;
    left:-110px;
    z-index:1;
}

#strightline {
    position:absolute;
    left:66%;
    top:22%;
    z-index:2;
}

#right-try { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid black; 
    border-right: 100px solid transparent;
    position:absolute;
    top:16%;
    left:45%;   
}

#coverbox11 {
    position:absolute;
    top:calc(8% );
    left:calc(30% );
    width:300px;
    height:500px;
}

#right-try:after { 
    width: 100%; 
    height: 100%;
    content: "";   
    border-bottom: 85px solid #fff; 
    border-right: 85px solid transparent;
    position:absolute;
    top:12px;
    left:6px;
    z-index:6;	
}

#obtuse-try {
    width: 0;
    height: 0;
    border-bottom: 100px solid black; 
    border-left: 140px solid transparent; 
    position:absolute;
    top:17%;
    left:20%;
}

#coverbox12 {
    position:absolute;
    top:calc(8% );
    left:calc(65% );
    width:300px;
    height:500px;
}

#obtuse-try:after {
    width: 100%;
    height: 100%;
    content: "";   
    border-bottom: 80px solid #fff; 
    border-left: 120px solid transparent; 
    position:absolute;
    top:14px;
    left:-125px;
    z-index:8;
}

#strightline3 {
    position:absolute;
    left:68.8%;
    top:16%;
    z-index:9;
}

<html>
<head>
    <script src="angleoftriangle.js"></script>
    <link rel="stylesheet" type="text/css" href="angleoftriangle.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div id="coverbox">
    <div id="equilateral-try">
    </div>
    <form id="text" onsubmit="return areaval()">
        <p id="heading1"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Acute Triangle</p>
        <p id="heading5"style="position:absolute;top:42%;left:20%;font-size:20px;color:black;">abc<90deg.</p>
        <input type="text" value ="" id="number" style="position:absolute;width:8%;height:4%;left:60%;top:40%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required>
        <input type="text" value ="" id="acure" style="position:absolute;width:8%;height:4%;left:78%;top:31%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="h"required>
        <input type="text" value ="" id="pmet" style="position:absolute;width:8%;height:4%;left:42%;top:25%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="a"required>
        <input type="text" value ="" id="cmet" style="position:absolute;width:8%;height:4%;left:88%;top:25%;outline:none;border:none;font-size:25px;z-index:5;background-color:transparent;" placeholder="c"required>
        <button style="position:absolute;height:20px;left:70%;top:41%;">sol</button>
    </form>
    <div id="result"style="position:absolute;top:55%;left:20%;font-size:20px;color:#878787;"></div>
    <div id="step4.1"style="position:absolute;top:60%;left:20%;font-size:20px;color:#878787;"></div>
    <div id="result2.2"style="position:absolute;top:68%;left:20%;font-size:20px;color:#878787;"></div>
    <div id="step4.6"style="position:absolute;top:73%;left:20%;font-size:20px;color:#878787;"></div>
    <svg height="16%" width="14%"id="strightline">
        <line x1="30" y1="0" x2="30" y2="105" style="stroke:black;stroke-width:2" />
    </svg>
</div>

<div id="coverbox11">
    <div id="right-try">
    </div>
    <form id="text1" onsubmit="return rightang()">
        <p id="heading1"style="position:absolute;top:7%;left:32%;font-size:22px;color:black;">Rightangle Triangle</p>
        <p id="heading5"style="position:absolute;top:42%;left:43%;font-size:20px;color:black;"> a=90degree.</p>
        <input type="text" value ="" id="oppsite" style="position:absolute;width:8%;height:4%;left:38%;top:23%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="a"required>
        <input type="text" value ="" id="hidgt" style="position:absolute;width:8%;height:4%;left:48%;top:23%;outline:none;border:none;font-size:25px;z-index:20;background-color:transparent;" placeholder="h"required>
        <input type="text" value ="" id="adjacent" style="position:absolute;width:8%;height:4%;left:53%;top:37%;outline:none;border:none;font-size:25px;z-index:4;background-color:transparent;" placeholder="b"required>
        <input type="text" value ="" id="hyper" style="position:absolute;width:8%;height:4%;left:68%;top:23%;outline:none;border:none;font-size:25px;z-index:6;background-color:transparent;" placeholder="c"required>
        <button style="position:absolute;height:20px;left:64%;top:38%;">sol</button>
    </form>
    <div id="raitresult"style="position:absolute;top:55%;left:43%;font-size:20px;color:#878787;"></div>
    <div id="step5.1"style="position:absolute;top:60%;left:43%;font-size:20px;color:#878787;"></div>
    <div id="periresult2"style="position:absolute;top:70%;left:43%;font-size:20px;color:#878787;"></div>
    <div id="step5.5"style="position:absolute;top:75%;left:43%;font-size:20px;color:#878787;"></div>
    <div id="periresult3"style="position:absolute;top:85%;left:43%;font-size:20px;color:#878787;"></div>
    <div id="step5.8"style="position:absolute;top:90%;left:43%;font-size:20px;color:#878787;"></div>
</div>

<div id="coverbox12">
    <div id="obtuse-try">
    </div>
    <svg height="15%" width="15%"id="strightline3">
        <path id="lineAB" d="M 100 150 l 70 -200" stroke="black" stroke-width="2" fill="none" />
    </svg>
    <form id="text2" onsubmit="return obtuseang()">
        <p id="heading16"style="position:absolute;top:8%;left:20%;font-size:22px;color:black;">Obtuse Triangle</p>
        <p id="heading17"style="position:absolute;top:42%;left:30%;font-size:20px;color:black;">a>90degree.</p>
        <input type="text" value ="" id="oppsite1" style="position:absolute;width:8%;height:4%;left:48%;top:38%;outline:none;border:none;font-size:25px;background-color:transparent;" placeholder="b"required>
        <input type="text" value ="" id="oppsite2" style="position:absolute;width:8%;height:4%;left:58%;top:28%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="h"required>
        <input type="text" value ="" id="oppsite6" style="position:absolute;width:8%;height:4%;left:71%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="c"required>
        <input type="text" value ="" id="oppsite7" style="position:absolute;width:8%;height:4%;left:36%;top:23%;outline:none;border:none;font-size:25px;z-index:16;background-color:transparent;" placeholder="a"required>
        <button style="position:absolute;height:20px;left:58%;top:39%;">sol</button>
    </form>
    <div id="raitresult43"style="position:absolute;top:55%;left:30%;font-size:20px;color:#878787;"></div>
    <div id="step6.1"style="position:absolute;top:60%;left:30%;font-size:20px;color:#878787;"></div>
    <div id="obtuseresult"style="position:absolute;top:70%;left:30%;font-size:20px;color:#878787;"></div>
    <div id="stepfine"style="position:absolute;top:75%;left:30%;font-size:20px;color:#878787;"></div>
</div>

<p id="heading19"style="position:absolute;top:-1%;left:30%;font-size:28px;color:blue;">Different types of triangle in angle method.</p>
</body>
</html>

我在三角形计算器中有一些代码，可以生成用于绘制三角形的 CSS 代码。但我想使用画布方法绘制三角形中的不同形状。如何将CSS中的编程代码更改为canvas？

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}

<html>
 <body onload="draw();">
   <canvas id="canvas" width="100" height="100"></canvas>
 </body>
</html>

您可以参考以下文章——在画布上绘制形状。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

canvas

如何使用canvas在单页中绘制三个三角形？的相关文章

判断一个数字是否能被 3 或 5 整除 (FizzBuzz)

如何根据输出是否能被 3 或 5 整除来更改输出如果它能被 3 整除我想显示 rock 如果它能被 5 整除我想显示 star 类似于 FizzBu zz 如果两者都有他们都会看到这是我的代码 if var n Math floo
如何从 JSON 响应重定向？

所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向文件上传正常但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作页面
在 jQuery 可排序中对多个选定项目进行排序？

我试图在 jQuery 可排序集中选择多个项目然后将选定的项目一起移动这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d
扩展位置绝对div超出溢出隐藏div

我已经好几个月没有做过CSS了所以我可能会错过一些简单的东西但无论解决方案是什么我都无法弄清楚所以问题就在这里这是我的代码的简化版本 div style height 100 width 200px div style margi
为什么 Web Worker 性能在 30 秒后急剧下降？

我正在尝试提高在网络工作人员中执行时脚本的性能它旨在解析浏览器中的大型文本文件而不会崩溃一切都运行得很好但我注意到使用网络工作者时大文件的性能存在严重差异于是我做了一个简单的实验我在同一输入上运行脚本两次第一次运行在页面的主线程
如何检测元素内容何时发生变化

我正在寻找一种方法来监视元素内动态填充无页面重新加载内容以便我可以将类添加到另一个元素到目前为止我有这个 HTML div class message container div class messages error span
如何使用 vanilla JS 实现可维护的反应式 UI

今天我遇到了一个问题可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决遗憾的是无法使用它以下简化情况链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面其
使用日期字符串数组在引导日期选择器中设置禁用月份不起作用

我有一个日期选择器其配置如下 HTML div class input group date div
引导行之间的垂直间距

所以我正在研究布局为了响应能力我决定使用 Bootstrap 现在我猜网格系统有问题我想要的结果如下 1 4 2
计算文本选择的 xy 位置

我正在尝试使用 DOM 元素创建自己的文本选择是的我的意思是当您在此元素中选择文本时您会在文本后面看到蓝色背景这个想法是停止默认行为蓝色并使用我自己的元素来完成工作方法是找到选择的 xy 位置然后放置绝对定位的元素我希望能
如何在 ASP.NET MVC 3 的 Razor 视图中编码嵌入的 javascript？

如何在以下上下文中正确编码 JavaScript 我的 JSON 对象中的值是由应用程序管理员设置的因此我假设它们需要正确编码对于 HTML 和 JavaScript 都是如此我在用着System Web Script Seriali
禁用特定 div 上的 Tab 键

我有以下结构 div div Some content div div Some content div div 我想禁用 div2 上的 tab 键我的意思是按下 tab 键时 div2 的元素不会获得焦点有没有简单的方法可以使用
@font-face 和 font-variant 是个坏主意吗？

如果我使用 font face字体和font variant small caps对于相同的选择器字体将回退到 Safari 中的下一个系统默认字体我该如何解决这个问题我一开始在创建一个示例来复制您的问题时遇到了一些麻烦这让我意识到
如何在html中制作多行类型的文本框？
Knockout.js 安全绑定

我想使用带有淘汰赛的安全绑定为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用它会抛出一个错误未捕获淘汰安全
Firebase 警告：使用 Firebase Cloud Function 搜索数据时使用未指定的索引

我构建了一个 Firebase 云函数用于查找 IsNotificationEnabled 值等于 true 的用户我的部分职能 export const sendPushNotification functions https onR
如何在表格列标题处垂直旋转文本

我用过这个数据表 http www datatables net 在我的网页上这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方我想要第一个数字第二个数字列应该垂直旋转我已经做到了但是问题
Node.js - 重载函数

有没有一种方法可以重载node js中的函数类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
Flowtype 属性“msg”缺失为 null 或未定义

我发现 Flow 很难用我明白那个Array find可以返回或未定义因此通过阅读以下内容 github Array find on Array 引发 https github com facebook flow issues 351
如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

我是使用 Bootstrap 插件的新手刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐

自定义 cassandra / cqlsh time_format

System CentOS 6 7 x86 64 cqlsh 5 0 1 卡桑德拉 2 2 1 CQL 规范 3 3 0 我在插入复制 csv 文件格式为 d m Y H M S 的时间戳字段时遇到问题默认情况下不支持这种格式因此我
如何从curl或github cli创建webhook

如何从curl 或github cli 创建webhook 这个文档没有多大帮助 https docs github com en rest reference repos create a repository webhook code
更改 CAShapeLayer 而不使用动画

我想设置strokeEnd的财产CAShapeLayer没有默认动画根本没有动画我环顾四周试图找到如何做到这一点但一切似乎都是关于如何为属性设置动画在核心动画术语中动画的更通用术语是动作例如您可以看到CAAnimation符
如何将两个数字相加？

我写了一个 JavaScript 计算器但是假设当我给出第一个数字时2第二个数字为3 结果显示23 但我想将这两个数字相加谁能帮帮我吗当我尝试减去这两个数字时也会发生这种情况为什么这不起作用 var cal prompt Pleas
如何在 ionic 框架 + cordova 中显示 local:// 图像？

有谁知道如何使用 Ionic http ionicframework com docs http ionicframework com docs 当应用程序在设备上运行时我当前收到此错误 GET unsafe local img thum
根据日期更改图像源

我想做的是根据月份和日期更改登陆页面图像问题是当我实现此代码时出现错误代码如下 function kblogo var d new Date var Today d getDate var Month d getMonth var lo
群组成员可登录 Facebook

我是 Facebook 上一个小组的管理员该小组大约有 40 50 名成员现在我正在为该组构建一个网页该网页将授权用户使用 Facebook 登录我正在使用 Laravel SammyK 的LaravelFacebookSDK ht
如何使用预处理器指令检查操作系统？

我需要我的代码根据编译它的操作系统来执行不同的操作我正在寻找这样的东西 ifdef OSisWindows do Windows specific stuff else do Unix specific stuff endif 有没有办法
如何将字符串渲染为自定义 React 组件？

所以我有这个代码 ReactDom render
重定向 URI 中“postmessage”的用途是什么？

据我所知在 Google 的身份验证代码流程中 redirect uri 需要为 postmessage 而不是 URI 谁能解释一下这个值具体是做什么的我最好的解释是它告诉浏览器返回到帖子的来源但我没有文档来支持这个假设关于这个
将 EXE 输出写入批处理文件

我有一个 EXE 其输出值为 0 1 EXE 将通过批处理文件调用我想要批处理文件运行 EXE 并写入获得的输出这怎么可能任何帮助将不胜感激我假设您想要捕获 EXECUTIVE 的输出并处理该值而不是仅仅打印该值以下是如何捕获
pywinauto 未检测到子窗口

我正在使用最新版本迄今为止的 pywinauto 还使用 PyInspect uia 来识别控件我正在自动化应用程序上的控件该过程的一部分是检查触发窗口从菜单选择如编辑 gt 设置中出现后弹出的窗口上的几个框问题是 pywi
如何合并两个 JObject？ [复制]

这个问题在这里已经有答案了我有第一个 json data id id1 field field1 paging prev link1 第二个 data id id2 field field2 paging prev link2 我想合并
Java swing 动画看起来不稳定。如何让它看起来专业？

更新半复杂动画摇摆计时器火车残骸问题的最终根源是 java 计时器无论是 swing 版本还是实用程序版本它们不可靠尤其是在跨操作系统比较性能时通过实现普通线程程序可以在所有系统上运行得非常流畅 http zetcode
呈现为下拉列表的智能字段不显示说明

我有一个智能字段我定义如下
pandas read_excel 同一张纸上的多个表

是否可以使用 pandas 从 Excel 工作表文件中读取多个表就像是读取 table1 从第 0 行到第 100 行读取 table2 从第 102 行到第 202 行我编写了以下代码来自动识别多个表以防您需要处理许多文件并且
配置不正确：包含的 urlconf .urls 中没有任何模式

我有一个 django 1 6 x 项目可以在开发服务器上正常运行但在 Ubuntu 12 04 3 上的 Apache2 2 2 22 1 和 mod wsgi 3 3 4 下失败并出现错误配置不正确包含的 urlconf er
Bash 波形符扩展

是否可以添加 bash 用于波浪号扩展的规则我想让 data 扩展到 data users me scratch 扩展到 data scratch me 等等这可能吗还是 bash 对的控制太紧 Thanks Andrew 波形符扩
将对象添加到 NSMutableArray 时遇到问题

我在将对象添加到 NSMutableArray array 时遇到问题 Controller m import Controller h implementation Controller void parser NSString stri
如何使用canvas在单页中绘制三个三角形？

function areaval var equation number val var secod acure val var thrd pmet val var frd cmet val var a Math abs parseInt

如何使用canvas在单页中绘制三个三角形？

如何使用canvas在单页中绘制三个三角形？ 的相关文章

随机推荐

热门标签

如何使用canvas在单页中绘制三个三角形？的相关文章