ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 キャンバス描画 - キャンバスを使用してグラフィックスとテキストを描画するチュートリアル HTML5 キャンバスを使用して美しい絵を描く_html5 チュートリアルスキル

HTML5 キャンバス描画 - キャンバスを使用してグラフィックスとテキストを描画するチュートリアル HTML5 キャンバスを使用して美しい絵を描く_html5 チュートリアルスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:46 PM

HTML5火的正熱，最近有個想法也是要用到HTML的相關功能，所以也要好好學習一把。

好好看了一下Canvas的功能，感覺HTML5在客戶端互動的功能性越來越強了，今天看了一下Canvas繪圖，下邊是幾個實例，記下以備後用。

1、使用Canvas繪製直線：

XML/HTML Code複製內容到剪貼簿

html>
html>
頭>
元元字元字元8"
> 頭
> 樣式類型>
樣式>
腳本類型類型型
>
函數 $$(id){
return document.getElementById(id);
}
函數 pageLoad(){ var
可 = $$('can'); 可以 = $$('can'); 鎠 var
罐子可以
罐子
cans.lineTo(220,60);//第三點（以第二點為起點） cans.lineWidth

cans.行程樣式

罐頭.中風();

}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
ボディ>
html>

ここで使用する 2 つの API メソッド、moveTo と lineTo はそれぞれ線分の始点と終点の座標、変数は (X 座標、Y 座標)、ストロークスタイル、ストロークでそれぞれパス描画スタイルと描画パスです。

2. グラデーションの線を描画します

グラデーションラインには色のグラデーション効果があります。もちろん、グラデーションスタイルはパスの方向に従うかどうかに関係なく、

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
頭>
<スタイルタイプ="text/ css">
canvas{border:dashed 2px #CCC}
スタイル>
<スクリプト type="text/ javascript">
関数 $$(id){
return document.getElementById(id);
}
function pageLoad(){
var できる = $$('できる');
var cancans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var gnt1 = cans.createLinearGradient(0,0,400,300);//線性渐变の起止座標
gnt1.addColorStop(0,'red');// 作成の開始色、0 は偏り量を示し、人は直線上の相対位置を示し、最大は 1、1 つの色に任意に書き込めます个渐变颜色
gnt1.addColorStop(1,' yellow');
cans.lineWidth=3;
cans.bloodStyle = gnt1;
cans.ストローク();
}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
ボディ>
html>

3. 長方形または正方形を描画します:

HTML4を使用すると、このような四角形の枠は背景コードでしか生成できませんでしたが、HTML5が提供するCanvas機能を利用することで簡単に描画できるようになり、HTML5のメリットは非常に高くなります。

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
頭>
<スタイルタイプ="text/ css">
canvas{border:dashed 2px #CCC}
スタイル>
<スクリプト type="text/ javascript">
関数 $$(id){
return document.getElementById(id);
}
function pageLoad(){
var できる = $$('できる');
var cancans = can.getContext('2d');
cans.fillStyle = ' yellow';
cans.fillRect(30,30,340,240);
}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
ボディ>
html>

ここでは fillRect() メソッドが使用されています。文字通りの意味から、ここでのパラメータは説明する価値がありますが、これはそうではありません。数学の座標と同じです。詳しくは

を参照してください。

ここでの X と Y は、キャンバスの左上隅を基準とした開始点から始まります。覚えておいてください。！

4. 単純な長方形のボックスを描画します

上記の例では、長方形のブロックを描画し、それを色で塗りつぶすことについて説明しています。この例では、塗りつぶし効果を実現せずに、単純に長方形を描画しています。

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
頭>
<スタイルタイプ="text/ css">
canvas{border:dashed 2px #CCC}
スタイル>
<スクリプト type="text/ javascript">
関数 $$(id){
return document.getElementById(id);
}
function pageLoad(){
var できる = $$('できる');
var cancans = can.getContext('2d');
cans.bloodStyle = 'red';
cans.ストロークRect(30,30,340,240);
}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
ボディ>
html>

これは非常に簡単です。上記の例と同様に、塗りつぶしをストロークに置き換えるだけです。詳細については、上の例を参照してください。

5. 線形グラデーションで長方形を描画します

グラデーションは塗りつぶしの非常に優れた効果です。例 2 と例 3 を組み合わせると、グラデーションの四角形を作成できます。

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
頭>
<スタイルタイプ="text/ css">
canvas{border:dashed 2px #CCC}
スタイル>
<スクリプト type="text/ javascript">
関数 $$(id){
return document.getElementById(id);
}
function pageLoad(){
var できる = $$('できる');
var cancans = can.getContext('2d');
var gnt1 = 缶.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
ボディ>
html>

説明する必要はありません。fillRect(X,Y,Width,Height) を覚えておいてください。

6. 円を塗りつぶします

楕円形を含む円形は広く使用されています。

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
頭>
<スタイルタイプ="text/ css">
canvas{border:dashed 2px #CCC}
スタイル>
<スクリプト type="text/ javascript">
関数 $$(id){
return document.getElementById(id);
}
function pageLoad(){
var できる = $$('できる');
var cancans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
cans.fillStyle = 'green';// 本来、ここで最初に使用されていたものは赤、截图一看，傻眼了，怕上街被愛する国人打啊，其实你懂的~~
cans.fill();
}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
ボディ>
html>

ここでの arc メソッドの使用法は、arc(X,Y,Radius,startAngle,endAngle,antiwatchwise) です。これは、(円の中心の X 座標、円の中心の Y 座標、半径、開始角度 (ラジアン)、終了角度) を意味します。ラジアン、時計回りに描画するかどうか);

円弧内のパラメータの比較:

a.cans.arc(200,150,100,0,Math.PI,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

d, cans.arc(200,150,100,0,Math.PI/2,false);

7. 円形ブロック

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
頭>
<スタイルタイプ="text/ css">
canvas{border:dashed 2px #CCC}
スタイル>
<スクリプト type="text/ javascript">
関数 $$(id){
return document.getElementById(id);
}
function pageLoad(){
var できる = $$('できる');
var cancans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.bloodStyle = 'red';
cans.ストローク();
}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="400px" 高さ="300px">4キャンバス>
ボディ>
html>

ここでは説明しません。上記の例と同様に、lineWidth は線の幅を制御します。

8. 円形グラデーション

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
頭>
<スタイルタイプ="text/ css">
canvas{border:dashed 2px #CCC}
スタイル>
<スクリプト type="text/ javascript">
関数 $$(id){
return document.getElementById(id);
}
function pageLoad(){
var できる = $$('できる');
var cancans = can.getContext('2d');
var gnt = cans.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
cans.fillStyle = gnt;
cans.fillRect(0,0,800,600);
}
スクリプト>
<body onload="pageLoad( );">
<キャンバス id="できる" 幅="800px" 高さ="600px">4キャンバス>
ボディ>
html>

ここで説明する必要があるのは、createRadialGradient メソッドです。パラメーターは (Xstart、Ystart、radiusStart、XEnd、YEnd、radiusEnd) です。つまり、グラデーションを実装するときに 2 つの円を使用します。1 つは元の円と他の円はグラデーション円です。実際、この座標と半径の制御方法は、

などの多くのスタイルを実現できます。

立体円

XML/HTML コードコンテンツをクリップボードにコピー

var gnt = cans.createRadialGradient(200,150,0,200,50,250);
gnt.addColorStop(0,'red');
gnt.addColorStop(1,'#333');

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7403

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1218

Related knowledge

ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか？ Mar 13, 2025 pm 08:00 PM

この記事では、ビューポートメタタグを使用してモバイルデバイスのページスケーリングを制御し、最適な応答性とパフォーマンスのために幅や初期スケールなどの設定に焦点を当てています。

HTML5 Webサイトにオーディオを追加する方法は？ Mar 10, 2025 pm 03:01 PM

この記事では、＆lt; audio＆gt;を使用してHTML5にオーディオを埋め込む方法について説明します。フォーマット選択のベストプラクティス（MP3、OGG Vorbis）、ファイルの最適化、および再生のためのJavaScriptコントロールを含む要素。複数のオーディオfを使用して強調しています

Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか？ Mar 18, 2025 pm 02:16 PM

この記事では、Geolocation APIを使用してユーザーの場所のプライバシーと許可を管理し、アクセス許可を要求するためのベストプラクティスを強調し、データセキュリティを確保し、プライバシー法を遵守することについて説明します。

HTML5とJavaScriptでインタラクティブなゲームを作成する方法は？ Mar 10, 2025 pm 06:34 PM

この記事では、JavaScriptを使用してインタラクティブなHTML5ゲームの作成を詳述しています。ゲームデザイン、HTML構造、CSSスタイリング、JavaScriptロジック（イベント処理とアニメーションを含む）、およびオーディオ統合をカバーしています。必須JavaScriptライブラリ（Phaser、PI

ユーザー入力にHTML5フォームを使用する方法は？ Mar 10, 2025 pm 02:59 PM

この記事では、HTML5フォームを作成および検証する方法について説明します。＆lt; form＆gt;の詳細要素、入力タイプ（テキスト、電子メール、番号など）、および属性（必須、パターン、MIN、最大）。 HTML5の利点は、古い方法よりも形成されます

HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか？ Mar 13, 2025 pm 07:51 PM

この記事では、HTML5ページの可視性APIを使用して、ページの可視性を検出し、ユーザーエクスペリエンスを向上させ、リソースの使用量を最適化します。重要な側面には、メディアの一時停止、CPU負荷の削減、視認性の変化に基づいて分析の管理が含まれます。

インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか？ Mar 18, 2025 pm 02:17 PM

この記事では、HTML5ドラッグアンドドロップAPIを使用してインタラクティブなユーザーインターフェイスを作成し、要素をドラッグ可能にし、キーイベントを処理し、カスタムフィードバックを使用してユーザーエクスペリエンスを強化する手順を作成する方法について説明します。また、aへの一般的な落とし穴についても説明します