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

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

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

0 引 言

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

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

1 HTML5 基礎(chǔ)知識

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

1.1 文本輸入框

使用＜input＞標簽在HTML頁面中創(chuàng)建一個文本輸入框。實例HTML 代碼為：

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

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

1.2 按鈕

使用＜button＞標簽在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＞標簽在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 方法定義線條開始坐標，使用lineTo 方法定義線條結(jié)束坐標，使用stroke 方法實際地繪制出定義的線條。實例JavaScript 代碼為：

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(300,200);

ctx.stroke();

此段代碼繪制了一條端點坐標為(100，100)和(300，200)的直線。值得注意的是，坐標原點在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();

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

1.3.3 繪制文本

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

ctx.font=“30px”;

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

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

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)力分布等于圓心的橫坐標加減半徑，即：

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

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

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è)大學力學中心＜/span＞

3.2 坐標系的繪制

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

圖2 坐標系圖

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

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

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

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

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