亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

        HTML5 Canvas在應(yīng)力狀態(tài)教學(xué)中的應(yīng)用研究

        2022-08-12 01:54:44陳俊旗張朋咸慶軍朱曉偉
        現(xiàn)代信息科技 2022年7期
        關(guān)鍵詞:畫布實例網(wǎng)頁

        陳俊旗,張朋,咸慶軍,朱曉偉

        (河南工業(yè)大學(xué) 土木工程學(xué)院,河南 鄭州 450001)

        0 引 言

        材料力學(xué)是土木工程、機械工程等專業(yè)的專業(yè)基礎(chǔ)課程,是必須掌握的理論課。應(yīng)力狀態(tài)是材料力學(xué)的重點和難點內(nèi)容,應(yīng)力圓(莫爾圓)是理解和掌握應(yīng)力狀態(tài)的一個重要手段。目前多在課前準(zhǔn)備不同例子的應(yīng)力圓圖片,確實也收到了不錯的效果,然而提前準(zhǔn)備的例子不具備靈活性,在授課過程中難以更改,不便于教師臨場發(fā)揮,而課堂教學(xué)現(xiàn)場在黑板手繪或者利用通用繪圖軟件繪制都較為費時。編制一個繪制應(yīng)力圓的專用程序,將有利于節(jié)約繪圖時間,提高課堂授課效果。雖然和應(yīng)力圓及應(yīng)力狀態(tài)相關(guān)的編程已經(jīng)在力學(xué)課程教學(xué)中有了一些探索和應(yīng)用,但仍有待進一步研究。

        超文本標(biāo)記語言(HyperText Markup Language, HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言,簡單易學(xué),并且不需要安裝開發(fā)環(huán)境,通過記事本和瀏覽器即可編輯和運行代碼。HTML5 是最新的HTML 標(biāo)準(zhǔn),擁有新的圖形以及多媒體元素,且無需額外插件。<canvas>元素是HTML5 中的新元素,通過使用該元素,就可以在網(wǎng)頁中繪制所需的圖形。已有學(xué)者利用HTML5 Canvas 進行了相關(guān)研究,但其在材料力學(xué)方面的研究還不多見。本文將圍繞應(yīng)力狀態(tài)這一知識點,系統(tǒng)地介紹如何利用HTML5 制作繪制應(yīng)力圓的網(wǎng)頁程序;探討如何利用該程序幫助學(xué)生更易理解應(yīng)力狀態(tài)這一知識難點。

        1 HTML5 基礎(chǔ)知識

        一個標(biāo)準(zhǔn)的HTML5 網(wǎng)頁程序由HTML 代碼、JavaScript代碼等組成,分別描述網(wǎng)頁程序中的元素、事件邏輯等。瀏覽器通過解析這些代碼來呈現(xiàn)完整的網(wǎng)頁程序,JavaScript使HTML頁面具有交互性。

        1.1 文本輸入框

        使用<input>標(biāo)簽在HTML頁面中創(chuàng)建一個文本輸入框。實例HTML 代碼為:

        <input type=“text” id=“mytext”>

        此段代碼創(chuàng)建了一個id 為“mytext”的文本輸入框。文本輸入框中的值可以通過JavaScript 代碼使用id 獲取。

        1.2 按鈕

        使用<button>標(biāo)簽在HTML頁面中創(chuàng)建一個按鈕。實例HTML 代碼為:

        <button type=“button” id=“myButton”onclick=“myfunction()”>1 號按鈕</button>

        此段代碼創(chuàng)建了一個id 為“myButton”且顯示為“1 號按鈕”的按鈕,點擊其將執(zhí)行對應(yīng)的“myfunction()”函數(shù),函數(shù)需要在JavaScript 代碼中定義。

        1.3 畫布(Canvas)

        使用<canvas>標(biāo)簽在HTML5頁面中創(chuàng)建一個畫布。實例HTML 代碼為:

        <canvas id=“my Canvas” width=“200”height=“100”></canvas>

        此段代碼創(chuàng)建了一個寬度為200、高度為100,id 為“myCanvas”的畫布。

        canvas 元素本身是沒有繪圖能力的,所有的繪制工作必須在JavaScript 內(nèi)部完成。JavaScript 使用id 來得到canvas 元素,使用getContext(“2d”)創(chuàng)建context 對象,getContext(“2d”)擁有繪制直線、矩形、圓形、字符等的方法。實例JavaScript 代碼為:

        var c=document.getElementById(“myCanvas”);

        var ctx=c.getContext(“2d”);

        此段代碼創(chuàng)建了一個名為“ctx”的context 對象。

        1.3.1 繪制直線

        使用路徑(path)繪制線條,使用beginPath 方法開始一條新路徑(線條),使用moveTo 方法定義線條開始坐標(biāo),使用lineTo 方法定義線條結(jié)束坐標(biāo),使用stroke 方法實際地繪制出定義的線條。實例JavaScript 代碼為:

        ctx.beginPath();

        ctx.moveTo(100,100);

        ctx.lineTo(300,200);

        ctx.stroke();

        此段代碼繪制了一條端點坐標(biāo)為(100,100)和(300,200)的直線。值得注意的是,坐標(biāo)原點在canvas 的左上角,向右方向為x 軸正方向,向下方向為y 軸正方向。

        1.3.2 繪制圓

        使用路徑(path)繪制線條,使用beginPath 方法開始一條新路徑(線條),使用arc 或arcTo 方法定義圓,使用stroke 方法實際地繪制出定義的圓。實例JavaScript 代碼為:

        ctx.beginPath();

        ctx.arc(100,75,50,0,2*Math.PI);

        ctx.stroke();

        此段代碼繪制了一個圓心坐標(biāo)為(100,75),半徑為50的圓。

        1.3.3 繪制文本

        使用fillText 方法繪制文本。實例JavaScript 代碼為:

        ctx.font=“30px”;

        ctx.fillText(“河南工業(yè)大學(xué)”,0,30);

        此段代碼在畫布的左上角繪制了“河南工業(yè)大學(xué)”。

        1.4 JavaScript 函數(shù)

        JavaScript 函數(shù)通過function 關(guān)鍵詞進行定義,其后是函數(shù)名和括號以及放置在花括號中的函數(shù)代碼,函數(shù)中的代碼將在其他代碼調(diào)用該函數(shù)時執(zhí)行。

        2 應(yīng)力狀態(tài)基本理論

        點的應(yīng)力狀態(tài)分析有兩種方法:解析法和圖解法。解析法通過力的平衡關(guān)系推導(dǎo)出任意方向斜截面上的應(yīng)力表達式,而圖解法通過消除解析法應(yīng)力表達式中的角度參數(shù),得到應(yīng)力圓方程:

        根據(jù)畫出的應(yīng)力圓,能夠較為直觀、方便地得到最大正應(yīng)力、最小正應(yīng)力等相關(guān)信息。其中,最大及最小正應(yīng)力分布等于圓心的橫坐標(biāo)加減半徑,即:

        3 交互式網(wǎng)頁的編程實現(xiàn)

        本節(jié)將詳細(xì)介紹利用HTML5 編程制作交互式網(wǎng)頁,有助于教師和學(xué)生了解如何將HTML5 這一強大的工具結(jié)合到材料力學(xué)的教學(xué)和學(xué)習(xí)當(dāng)中。

        3.1 網(wǎng)頁程序界面的制作

        通過HTML5 編程,在網(wǎng)頁上布置畫布、文本輸入框、按鈕等,進行界面的布局和設(shè)計,得到如圖1所示網(wǎng)頁程序界面。

        圖1 網(wǎng)頁程序界面

        通過該程序界面,可以實現(xiàn)數(shù)據(jù)的輸入和應(yīng)力圓的繪制。其中,需要輸入的數(shù)據(jù)有:單元體兩個正交平面上對應(yīng)的正應(yīng)力和切應(yīng)力數(shù)值。點擊“畫應(yīng)力圓”按鈕后則根據(jù)輸入的數(shù)據(jù)繪制出對應(yīng)的應(yīng)力圓。

        網(wǎng)頁程序界面對應(yīng)的HTML 代碼為:

        <div style=“font-size:30px;height:60px”>平面應(yīng)力狀態(tài)——應(yīng)力圓繪制程序</div>

        σ<sub>x</sub>:<input type=“text” value=””id=“text_stress_x”>

        σ<sub>y</sub>:<input type=“text” value=””id=“text_stress_y”>

        τ<sub>xy</sub>:<input type=“text” value=””id=“text_stress_xy”>

        <button type=“button” onclick=“plot_stress_circle()”>畫應(yīng)力圓</button><br>

        <canvas id=“canvas1” width=“700” height=“450”style=“border:solid 1px;”></canvas><br>

        <span style=“font-size:20px;”>版權(quán):河南工業(yè)大學(xué)力學(xué)中心</span>

        3.2 坐標(biāo)系的繪制

        通過JavaScript 編程,在畫布上繪制坐標(biāo)系,包含橫軸及縱軸,得到如圖2所示的坐標(biāo)系圖,坐標(biāo)系的坐標(biāo)原點位于畫布的中心。

        圖2 坐標(biāo)系圖

        坐標(biāo)軸由直線段及箭頭表示,其中箭頭由兩條斜直線段表示,坐標(biāo)軸箭頭處繪制出表示坐標(biāo)軸名稱的文本。其中繪制橫軸的plot_coordinate_x 函數(shù)代碼為:

        3.3 應(yīng)力圓參數(shù)及應(yīng)力極值的計算

        通過JavaScript 編程,根據(jù)輸入的單元體兩個正交平面上對應(yīng)的正應(yīng)力和切應(yīng)力數(shù)值,計算出應(yīng)力圓圓心橫坐標(biāo)、半徑及應(yīng)力極值。計算應(yīng)力圓參數(shù)及應(yīng)力極值的calculate_stress_circle 函數(shù)代碼為:

        3.4 應(yīng)力圓的繪制

        通過JavaScript 編程,根據(jù)計算得到的應(yīng)力圓圓心坐標(biāo)和半徑,在畫布上繪制應(yīng)力圓,并在畫布上繪制計算得到的應(yīng)力極值結(jié)果,得到如圖3所示的應(yīng)力圓圖。

        圖3 應(yīng)力圓圖

        繪制應(yīng)力圓的plot_stress_circle0 函數(shù)代碼如下:

        context.beginPath();

        context.arc(x0_circle+oox,0+ooy,r_circle,0,Math.PI*2);

        context.stroke();

        context.flilText(“最大正應(yīng)力:”+stress_max.toFixed(1),oox*1.1, ooy*1.75);

        context.fillText(“最小正應(yīng)力:”+stress_min.toFixed(1),oox*1.1,ooy*1.75+30);

        4 結(jié) 論

        本文主要研究了HTML5 Canvas 在應(yīng)力狀態(tài)教學(xué)中的應(yīng)用,以便學(xué)生更好地掌握運用Canvas 實現(xiàn)更廣泛的圖形繪制。基于HTML5 編程,無需安裝專門的編程環(huán)境,利于廣大教師和學(xué)生進行編程實踐。通過使用交互式網(wǎng)頁程序,能夠使概念抽象的應(yīng)力狀態(tài)知識形象化,有利于學(xué)生理解并掌握相關(guān)知識。

        猜你喜歡
        畫布實例網(wǎng)頁
        商業(yè)模式畫布
        商界評論(2022年12期)2022-03-06 16:43:01
        為什么要在畫布上割一刀?
        讓鮮花在畫布上盛開
        基于CSS的網(wǎng)頁導(dǎo)航欄的設(shè)計
        電子制作(2018年10期)2018-08-04 03:24:38
        基于URL和網(wǎng)頁類型的網(wǎng)頁信息采集研究
        電子制作(2017年2期)2017-05-17 03:54:56
        網(wǎng)頁制作在英語教學(xué)中的應(yīng)用
        電子測試(2015年18期)2016-01-14 01:22:58
        大師的畫布
        完形填空Ⅱ
        完形填空Ⅰ
        10個必知的網(wǎng)頁設(shè)計術(shù)語
        国产福利美女小视频| 亚洲日韩精品一区二区三区| 六月丁香综合在线视频| 国产人在线成免费视频| 乱人伦中文字幕在线不卡网站| 亚洲国产黄色在线观看| 亚洲蜜臀av一区二区三区| 国产无吗一区二区三区在线欢| 天天干成人网| 在线观看日本一区二区| 国内自拍视频在线观看h| 翘臀诱惑中文字幕人妻| 亚洲女人的天堂网av| 国产精品网站91九色| 亚洲欧美日韩综合一区二区| 不卡一卡二卡三乱码免费网站 | 成 人 网 站 在线 看 免费| 久久久调教亚洲| 中文字幕第一页人妻丝袜| 国产午夜视频在线观看免费| 欧美不卡一区二区三区 | 羞羞视频在线观看| 最好看2019高清中文字幕视频| 日韩av二区三区一区| 女优免费中文字幕在线| 亚洲中文字幕乱码在线观看 | 一区二区三区免费自拍偷拍视频| 免费黄网站一区二区三区| 国产综合开心激情五月| 国内精品久久久久久99| 好日子在线观看视频大全免费动漫| 猫咪av成人永久网站在线观看 | 亚洲av午夜成人片精品电影| 青草内射中出高潮| 色噜噜狠狠一区二区三区果冻| 免费黄色电影在线观看| 国产啪精品视频网站丝袜| 激情欧美日韩一区二区| 精品国产免费Av无码久久久| 极品 在线 视频 大陆 国产| 精品少妇大屁股白浆无码|