HTML5 を使用して貪欲なスイカを描く方法を教えます-H5 チュートリアル-php.cn

HTML5 を使用して貪欲なスイカを描く方法を教えます

藏色散人

リリース： 2021-08-11 14:46:29

オリジナル

2236 人が閲覧しました

暑い夏の日に、どうして冷たいスイカを逃すことができますか?プログラムの機能を使いこなすと、いつも不思議な効果を出したくなります（笑）。ということで、今日はタイトルの通り、HTML5を使って半円弧のスイカ（種なしです、笑）を実現してみます。

あなたが HTML5 についてどれだけ知っているかわかりません。半円形のスイカスタイルを実現できるコードをローカルで作成できるかもしれません。ちょっと思い出してください: スイカの典型的な配色は赤と緑です~

次は私が示した実装方法です。コードを直接コピーしてローカルでテストできます:

コードは次のとおりです:

<!DOCTYPE HTML>
<html>
<head>
    <script>
        window.onload = function()
        {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");
            drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E");
            function drawArc(xPos, yPos, radius, startAngle, endAngle,
                             anticlockwise, lineColor, fillColor)
            {
                var startAngle = startAngle * (Math.PI/180);
                var endAngle = endAngle * (Math.PI/180);
                var radius = radius;

                context.strokeStyle = lineColor;
                context.fillStyle = fillColor;
                context.lineWidth = 8;
                context.beginPath();
                context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
                context.fill();
                context.stroke();
            }
        }
    </script>
</head>
<body>
<div style = "width:240px; height:140px; margin:0 auto; padding:5px;">
    <canvas id = "canvasArea" width = "210" height = "130"
            style = "border:2px solid black">
        你的浏览器目前不支持HTML5 Canvas。
    </canvas>
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。 :

HTML5 を使用して貪欲なスイカを描く方法を教えます

忘れてください~これは貪欲なスイカですか、ははは~

ここで誰もがマスターする必要がある主な知識点は、HTML5 のキャンバス要素です。

HTML5 キャンバス要素の使用法ユーザーエクスペリエンスを向上させるために、グラフィックス、アニメーション、動的イメージ、グラフ、およびテキストを描画するために使用されます。

キャンバスの概要: HTML5 のキャンバス要素は、JavaScript を使用して Web ページ上に画像を描画します。キャンバスは、すべてのピクセルを制御できる長方形の領域です。 Canvas には、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

arc() メソッドを使用して、キャンバス上に円弧を描画できます。

arc() 構文

arc(x, y, radius, startAngle, endAngle, anticlockwise)

ログイン後にコピー

ここで、x と y は円の中心の座標、radius は円の半径、startAngle とendAngle パラメータは、X 軸からのラジアン単位で表した円弧の開始点と終了点です。反時計回りパラメータは、円弧が実際に反時計回りに描かれる場合はブール値であり、それ以外の場合は時計回りです。

関連する推奨事項: 「HTML ビデオチュートリアル」「JavaScript 基本チュートリアル」

以上がHTML5 を使用して貪欲なスイカを描く方法を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTML5 を使用して貪欲なスイカを描く方法を教えます