検証コード干渉を実装する js (静的)
|
この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 効果
コード
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
<スタイル>
*{
パディング: 0;
マージン: 0;
}
キャンバス{
背景: #272822;
}
</スタイル>
</head>
<本文>
<キャンバスid='キャンバス' 幅='800' 高さ='500'></キャンバス>
<スクリプト>
//描画ボードを取得します var canvas=document.getElementById('canvas');
//描画環境を取得します。var cv=canvas.getContext('2d');
塗りつぶしスタイル = '#272822';
cv2.fillRect(0,0,800,500);
cv.font='80px マイクロソフト YaHei';
cv2.fillStyle='緑黄色';
cv2.fillText( Math.floor(Math.random()*10000),200,200);
//すべての画像ピクセル情報を取得します。var alldata=cv.getImageData(0,0,800,500);
//ピクセル数を取得します。var dian=alldata.data.length/4;
(var i=0;i<10000;i++){
// 乱数を取得します var num=Math.floor(Math.random()*dian);
//ピクセルに対応する 4 つの情報の開始番号を計算します。var start=(num-1)*4;
alldata.data[start]=Math.floor(Math.random()*256);
alldata.data[start+1]=Math.floor(Math.random()*256);
alldata.data[start+2]=Math.floor(Math.random()*256);
}
//データを描画ボードに書き戻します cv.putImageData(alldata,0,0);
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します
推薦する
JavaScript コンストラクタとプロトタイプの関係
目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...
VueはGraphVisを使用して無限に拡張された関係グラフを開発します
1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...
vue+canvasでタイムラインを描く方法
この記事では、参考までにvueキャンバスのタイムライン描画の具体的なコードを紹介します。具体的な内容...
CentOS7 に YUM 経由で MySQL 5.7 をインストールする詳細な手順
1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...
クリック範囲を拡大する入力チェックボックスを実装する方法
XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...
ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。
コードをコピーコードは次のとおりです。 <span style="font-size...
React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)
目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....
Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?
目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...
Reactのdiffアルゴリズムの詳細な分析
Reactのdiffアルゴリズムの理解diffアルゴリズムは、 Virtual DOMの変更された部...
あまり知られていない JS の問題: [] == ![] は true ですが、{} == !{} は false です
console.log( [] == ![] ) // 真 console.log( {} == ...
CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。
まとめ：以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。...
Spring Boot Docker パッケージング ツールの概要
目次スプリングブートDocker spring-boot-maven-プラグインSpotify Ma...
Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します
Vue3プロジェクトのカプセル化サイドナビゲーションテキストスケルトン効果コンポーネント-グローバル...
良いデザインについて
<br />「良いデザインとは何か」と答える 1 万人に対して、少なくとも 1 万 1 ...
Vue.set() と this.$set() の使い方と違い
開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...