この記事では、スクラッチ効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 レンダリング HTMLコード: <div class="ggk"> <span id="span">200元</span> <キャンバスid="キャンバス"></キャンバス> </div> CSSコード: .ggk { 幅: 200ピクセル; 高さ: 100px; 境界線: 1px実線 #000; マージン: 20px 自動; 色: 赤; 位置: 相対的; } .ggk スパン { 位置: 絶対; 幅: 100%; 高さ: 100%; テキスト配置: 中央; フォントサイズ: 50px; 行の高さ: 100px; } #キャンバス { 位置: 絶対; 左: 0; 上: 0; } jsコード: var キャンバス = document.getElementById("キャンバス") 初期化() 関数init() { キャンバスの幅 = 200; キャンバスの高さ = 100; var ctx = canvas.getContext("2d") // グレーのレイヤーでカバーする ctx.save(); ctx.fillStyle = 'rgb(100,100,100)' ctx.fillRect(0, 0, 200, 100) 描画(ctx) プロ() } // ランダムコンテンツ function pro() { var span = document.getElementById("span") var arr = ["100元", 'ご愛顧ありがとうございます', '200元', 'ご愛顧ありがとうございます', 'ご愛顧ありがとうございます', 'ご愛顧ありがとうございます', '500万', 'ご愛顧ありがとうございます'] var num = Math.floor(Math.random() * (arr.length - 1)) var テキスト = arr[数値] span.innerHTML = テキスト } 関数draw(ctx){ //クリックイベント canvas.onmousedown = function(e){ // 移動イベント var downX = e.offsetX var 下Y = e.offsetY ctx.beginPath() // ctx.globalCompositeOperation = 'destination-out' ctx.lineWidth = 10; ctx.moveTo(下X、下Y) キャンバス.onmousemove = 関数(e){ var x = e.offsetX var y = e.offsetY // ctx.lineTo(x,y) ctx.clearRect(x,y,20,20) ctx.ストローク() } } // マウスポップアップイベント canvas.onmouseup = function(){ キャンバス.onmousemove = null } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...
目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...
JPQL は Java Persistence Query Language の略です。 Java ...
需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...
目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...
1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親...
0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...
この実験のテスト環境: Windows 10+cmd+MySQL5.6.36+InnoDB 1. ト...
IE10 では、<input> と <input type="passw...
序文システムの高可用性を満たすためには、通常、クラスターを構築する必要があります。ホストがクラッシュ...
この記事では、フロア効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...
MySQL の explain コマンドは SQL のパフォーマンスを分析できます。その 1 つが ...
目次序文1. Ingressの展開と構成2. httpsを使用する序文k8sクラスタサービスがデプロ...
目次TypeScript環境の構築ステップ1: Taobaoミラーをダウンロードするステップ2: T...
vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...