電子宝くじスクラッチオフを実装するためのHTML5/CSS3特別トピックキャンバスシミュレーションのサンプルコード（写真）-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

電子宝くじスクラッチオフを実装するためのHTML5/CSS3特別トピックキャンバスシミュレーションのサンプルコード（写真）

黄舟

Mar 10, 2017 pm 04:06 PM

今日は、HTML5 キャンバスに基づくスクラッチオフ宝くじの小さな例を紹介します。興味がある場合は、Android バージョンなどに変更できます。

レンダリング:

500万枚を獲得した私の写真、何をするか、どう使うか~

さて、原則から始めましょう:

1 スクラッチエリアには 2 つのキャンバスがあり、1 つは前面、もう 1 つは背面です。背面、前面は下のキャンバスを覆います。

2. キャンバスはデフォルトで長方形で塗りつぶされ、以下のキャンバスのレンダリングを覆い、マウスイベントをリッスンし、mousemove の x、y 座標に従って前面のキャンバス上の長方形の領域を消去してから、以下のキャンバスのレンダリング。

とても簡単です~ふふ~

1. HTML ファイルの内容:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>
    <script type="text/javascript" src="canvas2d.js"></script>

    <script type="text/javascript" src="GuaGuaLe2.js"></script>

    <script type="text/javascript">

        $(function ()
        {
            var guaguale = new GuaGuaLe("front", "back");
            guaguale.init({msg: "￥5000000.00"});
        });
    </script>
    <style type="text/css">


        body
        {
            background: url("s_bd.jpg") repeat 0 0;
        }

        .container
        {
            position: relative;
            width: 400px;
            height: 160px;
            margin: 100px auto 0;
            background: url(s_title.png) no-repeat 0 0;
            background-size: 100% 100%;
        }

        #front, #back
        {
            position: absolute;
            width: 200px;
            left: 50%;
            top: 100%;
            margin-left: -130px;
            height: 80px;
            border-radius: 5px;
            border: 1px solid #444;
        }

    </style>

</head>
<body>

<p class="container">
    <canvas id="back" width="200" height="80"></canvas>
    <canvas id="front" width="200" height="80"></canvas>
</p>


</body>
</html>

2. まず、今日使用するいくつかのメソッドを残して、以前に作成した Canvas 補助クラスを使用します:

/**
 * Created with JetBrains WebStorm.
 * User: zhy
 * Date: 13-12-17
 * Time: 下午9:42
 * To change this template use File | Settings | File Templates.
 */

function Canvas2D($canvas)
{
    var context = $canvas[0].getContext("2d"),
        width = $canvas[0].width,
        height = $canvas[0].height,
        pageOffset = $canvas.offset();


    context.font = "24px Verdana, Geneva, sans-serif";
    context.textBaseline = "top";


    /**
     * 绘制矩形
     * @param start
     * @param end
     * @param isFill
     */
    this.drawRect = function (start, end, isFill)
    {
        var w = end.x - start.x , h = end.y - start.y;
        if (isFill)
        {
            context.fillRect(start.x, start.y, w, h);
        }
        else
        {
            context.strokeRect(start.x, start.y, w, h);
        }
    };

    /**
     * 根据书写的文本，得到该文本在canvas上书写的中心位置的左上角坐标
     * @param text
     * @returns {{x: number, y: number}}
     */
    this.caculateTextCenterPos = function (text)
    {
        var metrics = context.measureText(text);
        console.log(metrics);
//        context.font = fontSize + "px Verdana, Geneva, sans-serif";
        var textWidth = metrics.width;
        var textHeight = parseInt(context.font);

        return {
            x: width / 2 - textWidth / 2,
            y: height / 2 - textHeight / 2
        };
    }
    this.width = function ()
    {
        return width;
    }
    this.height = function ()
    {
        return height;
    }
    this.resetOffset = function ()
    {
        pageOffset = $canvas.offset();
    }
    /**
     * 当屏幕大小发生变化，重新计算offset
     */
    $(window).resize(function ()
    {
        pageOffset = $canvas.offset();
    });

    /**
     * 将页面上的左边转化为canvas中的坐标
     * @param pageX
     * @param pageY
     * @returns {{x: number, y: number}}
     */
    this.getCanvasPoint = function (pageX, pageY)
    {
        return{
            x: pageX - pageOffset.left,
            y: pageY - pageOffset.top
        }
    }
    /**
     * 清除区域，此用户鼠标擦出刮奖涂层
     * @param start
     * @returns {*}
     */
    this.clearRect = function (start)
    {
        context.clearRect(start.x, start.y, 10, 10);
        return this;
    };

    /**
     *将文本绘制到canvas的中间
     * @param text
     * @param fill
     */
    this.drawTextInCenter = function (text, fill)
    {
        var point = this.caculateTextCenterPos(text);
        if (fill)
        {
            context.fillText(text, point.x, point.y);
        }
        else
        {
            context.strokeText(text, point.x, point.y);
        }
    };
    /**
     * 设置画笔宽度
     * @param newWidth
     * @returns {*}
     */
    this.penWidth = function (newWidth)
    {
        if (arguments.length)
        {
            context.lineWidth = newWidth;
            return this;
        }
        return context.lineWidth;
    };

    /**
     * 设置画笔颜色
     * @param newColor
     * @returns {*}
     */
    this.penColor = function (newColor)
    {
        if (arguments.length)
        {
            context.strokeStyle = newColor;
            context.fillStyle = newColor;
            return this;
        }

        return context.strokeStyle;
    };

    /**
     * 设置字体大小
     * @param fontSize
     * @returns {*}
     */
    this.fontSize = function (fontSize)
    {
        if (arguments.length)
        {
            context.font = fontSize + "px Verdana, Geneva, sans-serif";

            return this;
        }

        return context.fontSize;
    }


}

このクラスはCanvas オブジェクトは単純にカプセル化され、パラメータを設定したり、グラフィックスを描画したりするだけです。このクラスは改善できます~

3. ユーザーが渡した 2 つのキャンバス ID を渡します。、初期化操作を実行し、イベントを設定するオブジェクトを生成します。もちろん、オプションのパラメーター、さまざまな色、スクレイピング後に表示される情報などもユーザーに提供します。 {

FrontFillcolor: "Silver"、

Backfillcolor: "GOLD"、
Backfontcolor: "Red"、
BackfontSize: 24、s msg: "ありがとう、Hui Gu"
}; 設定のために init メソッドに渡されました。

それでは、基本的には完了しました。テストしてみましょう:

これは基本的にレイヤーのスクレイピングを実現しますが、小さな問題があります。つまり、ユーザーが非常に速くスライドすると、いくつかのブレークポイントが表示される可能性があります。無視されますが、次の解決策を提供する準備ができています:

原因: マウスの動きが速すぎるために生成されたブレークポイント; 解決策: Mousemove でマウスの左側を複数のブレークポイント座標に 2 回分割します:

上の図に示すように、2 つの点を結び、傾きに応じて複数の小さな線分に分割し、それぞれの線分上の座標を取得します (4 つの可能性があります。興味がある場合は、絵を描いて計算します。コードは次のとおりです):

/**
 * Created with JetBrains WebStorm.
 * User: zhy
 * Date: 14-6-24
 * Time: 上午11:36
 * To change this template use File | Settings | File Templates.
 */
function GuaGuaLe(idFront, idBack)
{
    this.$eleBack = $("#" + idBack);
    this.$eleFront = $("#" + idFront);
    this.frontCanvas = new Canvas2D(this.$eleFront);
    this.backCanvas = new Canvas2D(this.$eleBack);

    this.isStart = false;

}

GuaGuaLe.prototype = {
    constructor: GuaGuaLe,
    /**
     * 将用户的传入的参数和默认参数做合并
     * @param desAttr
     * @returns {{frontFillColor: string, backFillColor: string, backFontColor: string, backFontSize: number, msg: string}}
     */
    mergeAttr: function (desAttr)
    {
        var defaultAttr = {
            frontFillColor: "silver",
            backFillColor: "gold",
            backFontColor: "red",
            backFontSize: 24,
            msg: "谢谢惠顾"
        };
        for (var p in  desAttr)
        {
            defaultAttr[p] = desAttr[p];
        }

        return defaultAttr;

    },


    init: function (desAttr)
    {

        var attr = this.mergeAttr(desAttr);

        //初始化canvas
        this.backCanvas.penColor(attr.backFillColor);
        this.backCanvas.fontSize(attr.backFontSize);
        this.backCanvas.drawRect({x: 0, y: 0}, {x: this.backCanvas.width(), y: this.backCanvas.height()}, true);
        this.backCanvas.penColor(attr.backFontColor);
        this.backCanvas.drawTextInCenter(attr.msg, true);
        //初始化canvas
        this.frontCanvas.penColor(attr.frontFillColor);
        this.frontCanvas.drawRect({x: 0, y: 0}, {x: this.frontCanvas.width(), y: this.frontCanvas.height()}, true);

        var _this = this;
        //设置事件
        this.$eleFront.mousedown(function (event)
        {
            _this.mouseDown(event);
        }).mousemove(function (event)
            {
                _this.mouseMove(event);
            }).mouseup(function (event)
            {
                _this.mouseUp(event);
            });
    },
    mouseDown: function (event)
    {
        this.isStart = true;
        this.startPoint = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);
    },
    mouseMove: function (event)
    {
        if (!this.isStart)return;
        var p = this.frontCanvas.getCanvasPoint(event.pageX, event.pageY);
        this.frontCanvas.clearRect(p);
    },
    mouseUp: function (event)
    {
        this.isStart = false;
    }
};

4. 最後に、完全な GuaGuaLe.js

  var k;
        if (p.x > this.startPoint.x)
        {
            k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x);
            for (var i = this.startPoint.x; i < p.x; i += 5)
            {
                this.frontCanvas.clearRect({x: i, y: (this.startPoint.y + (i - this.startPoint.x) * k)});
            }
        } else
        {
            k = (p.y - this.startPoint.y) / (p.x - this.startPoint.x);
            for (var i = this.startPoint.x; i > p.x; i -= 5)
            {
                this.frontCanvas.clearRect({x: i, y: (this.startPoint.y + ( i - this.startPoint.x  ) * k)});
            }
        }
        this.startPoint = p;

を投稿します。

以上が電子宝くじスクラッチオフを実装するためのHTML5/CSS3特別トピックキャンバスシミュレーションのサンプルコード（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード：クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は？答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。