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

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

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

0 引 言

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

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

1 HTML5 基礎(chǔ)知識(shí)

一個(gè)標(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)建一個(gè)文本輸入框。實(shí)例HTML 代碼為：

＜input type=“text” id=“mytext”＞

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

1.2 按鈕

使用＜button＞標(biāo)簽在HTML頁面中創(chuàng)建一個(gè)按鈕。實(shí)例HTML 代碼為：

＜button type=“button” id=“myButton”onclick=“myfunction()”＞1 號(hào)按鈕＜/button＞

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

1.3 畫布（Canvas）

使用＜canvas＞標(biāo)簽在HTML5頁面中創(chuàng)建一個(gè)畫布。實(shí)例HTML 代碼為：

＜canvas id=“my Canvas” width=“200”height=“100”＞＜/canvas＞

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

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

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

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

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

1.3.1 繪制直線

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

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(300,200);

ctx.stroke();

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

1.3.2 繪制圓

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

ctx.beginPath();

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

ctx.stroke();

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

1.3.3 繪制文本

使用fillText 方法繪制文本。實(shí)例JavaScript 代碼為：

ctx.font=“30px”;

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

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

1.4 JavaScript 函數(shù)

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

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

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

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

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

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

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

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

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

通過該程序界面，可以實(shí)現(xiàn)數(shù)據(jù)的輸入和應(yīng)力圓的繪制。其中，需要輸入的數(shù)據(jù)有：單元體兩個(gè)正交平面上對應(yīng)的正應(yīng)力和切應(yīng)力數(shù)值。點(diǎn)擊“畫應(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)原點(diǎn)位于畫布的中心。

圖2 坐標(biāo)系圖

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

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

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

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

通過JavaScript 編程，根據(jù)計(jì)算得到的應(yīng)力圓圓心坐標(biāo)和半徑，在畫布上繪制應(yīng)力圓，并在畫布上繪制計(jì)算得到的應(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é)生更好地掌握運(yùn)用Canvas 實(shí)現(xiàn)更廣泛的圖形繪制。基于HTML5 編程，無需安裝專門的編程環(huán)境，利于廣大教師和學(xué)生進(jìn)行編程實(shí)踐。通過使用交互式網(wǎng)頁程序，能夠使概念抽象的應(yīng)力狀態(tài)知識(shí)形象化，有利于學(xué)生理解并掌握相關(guān)知識(shí)。