検索
ホームページウェブフロントエンドH5 チュートリアルHTML5 Canvas API のプログラミング _html5 チュートリアルのスキル


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



キャンバスに参加


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

//Canvas 要素を取得しますとその描画コンテキスト var Canvas = document.getElementById("diagonal");
var context = Canvas.getContext("2d");
//絶対座標を使用してパスを作成します
context.beginPath( );
context.moveTo(70, 140);
context.lineTo(140, 70);
//この線を Canvas に描画します
context.ストローク(); >
変身

変形(ズーム、平行移動、回転)等により上記と同様の効果を得ることができます。

変形を使用して斜めの線を描画します


コードをコピーコードは次のとおりです:
//Canvas 要素を取得しますとその描画コンテキスト
var Canvas = document.getElementById("diagonal");
var context = Canvas.getContext("2d");
// 現在の描画状態を保存します
context.save ();
//描画コンテキストを右下に移動
context.translate(70, 140);
//原点を始点として、先ほどと同じ線分を描画します
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
context.ストローク();

context.restore();


パス

HTML5 Canvas API のパスは、レンダリングする任意の形状を表します。

beginPath(): どのような種類のグラフィックスの描画を開始する場合でも、最初に呼び出す必要があるのは beginPath です。この単純な関数はパラメーターをとらず、新しいグラフィックの描画を開始することをキャンバスに通知するために使用されます。

moveTo(x,y): 描画せずに現在位置を新しいターゲット座標 (x,y) に移動します。

lineTo(x,y): 現在位置を新しいターゲット座標 (x,y) に移動するだけでなく、2 つの座標間に直線を描きます。

closePath(): この関数は lineTo と非常によく似た動作をします。唯一の違いは、closePath がパスの開始座標をターゲット座標として自動的に使用することです。また、現在描画されている形状が閉じているか、完全に囲まれた領域を形成していることをキャンバスに通知します。これは、将来の塗りつぶしやストロークに非常に役立ちます。

松の樹冠を描く


コードをコピーしますコードは次のとおりです。
function createCanopyPath(context) {
// 樹冠を描画します
context.beginPath();

context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo( -5, -110);
context.lineTo(-15, -110);

//ツリーの頂点
context.lineTo(0, -140);

context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, - 80);
context.lineTo(25, -50);
// 開始点、閉じたパスを接続します
context.closePath();
}

functiondrawTrails() {
var Canvas = document.getElementById('diagonal');
var context = Canvas.getContext('2d');

context.save();
context.translate(130, 250);

//キャノピーを表すパスを作成します
createCanopyPath(context);

// 現在のパスを描画します
context.ストローク();
context.restore();
}

window.addEventListener("load",drawTrails, true);


ストロークスタイル

ストローク モードを使用して、樹冠をよりリアルに見せます。


コードをコピーしますコードは次のとおりです:
//行を広げます
context .lineWidth = 4;
//スムーズパスのジョイントポイント
context.lineJoin = 'round';
//Color
context.ストロークStyle = '#663300';
//現在のパスを描画
context.ストローク();


塗りつぶしスタイル

context.fillStyle = "#339900";

長方形を描画します

ツリーに幹を追加します

context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);

曲線を描く


コードをコピーします
コードは次のとおりです。

context.save();
context.translate(-10, 350);
context.beginPath();

// 最初の曲線は右上がりに曲がります
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);

//右下にカーブ
context.quadraticCurveTo(310, -250, 410, -250);

// 幅の広い茶色のストロークでパスを描画します
context.drawingStyle = '#663300';
context.lineWidth = 20;
context.ストローク();

// 前のキャンバスの状態を復元します
context.restore();

キャンバスに写真を挿入

イメージを操作するには、イメージが完全にロードされるまで待つ必要があります。通常、ブラウザはページ スクリプトの実行時に画像を非同期で読み込みます。画像が完全に読み込まれる前にキャンバスにレンダリングしようとすると、キャンバスには画像が表示されなくなります。そのため、画像が確実に読み込まれるように特別な注意を払う必要があります。 。


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

// 画像をロード
var bark = new Image();
bark.src = "bark.jpg";

// 画像がロードされた後、描画関数を呼び出します
bark.onload = function () {
drawTrails();
}

画像を表示:

//木の幹の背景として背景パターンで塗りつぶします context.drawImage(bark, -5, -50, 10, 50);

グラデーション

グラデーションを使用するには、次の 3 つの手順が必要です:

(1) グラデーションオブジェクトの作成

(2) グラデーションオブジェクトの色を設定し、遷移方法を指定します

(3) コンテキスト上の塗りつぶしスタイルまたはストロークスタイルのグラデーションを設定します


コードをコピーします
コードは次のとおりです:

// 3 つのコードを作成します-次元の木の幹のテクスチャ 水平方向のグラデーションの順序
var trainGradient = context.createLinearGradient(-5, -50, 5, -50);

//幹の左端は一般的に茶色です
trunkGradient.addColorStop(0, '#663300');

// トランクの中央左部分の色については議論する必要があります
trunkGradient.addColorStop(0.4, '#996600');

//右端の色を暗くする必要があります
trunkGradient.addColorStop(1, '#552200');

// トランクをグラデーションで塗りつぶします
context.fillStyle =trunkGradient;
context.fillRect(-5, -50, 10, 50);
// トランクを埋める垂直グラデーションを作成します。樹冠のある幹 木の幹に影を付けます
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// 投影グラデーションの開始点は黒で、透明度は 50%
canopyShadow.addColorStop(0, ' rgba(0, 0, 0, 0.5)');
// 方向は垂直下向きで、短い距離ですぐに完全に透明になります。
// この長さを超えています。Projection
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');

// 木の幹を投影グラデーションで塗りつぶします
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

背景画像


コードをコピー
コードは次のとおりです:
// 画像をロード
vargravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}

//茶色の太い線を背景画像に置き換えます
context.drawingStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.steroid() ;



context.createPattern の 2 番目のパラメータは再現性マーカーであり、表 2-1 で適切な値を選択できます。

ズーム

スケーリング関数 context.scale(x,y): x と y は、それぞれ x 次元と y 次元の値を表します。各パラメータには、キャンバス上に画像を表示する際に、方向軸上で画像を拡大(または縮小)する量が渡されます。 x の値が 2 の場合、描画されるイメージのすべての要素の幅が 2 倍になることを意味します。y の値が 0.5 の場合、描画されるイメージの高さは以前の半分になります。


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

// X=130 、Y= 250 で最初のツリーを描画します
context.save();
context.translate(130, 250);
drawTree(context);
context.restore(); p>

// 2 番目のツリーを X=260、Y=500 に描画します
context.save();
context.translate(260, 500);

//2 番目のツリーの高さと幅を元の値の 2 倍に拡大します
context.scale(2, 2);
drawTree(context);
context.restore();

回転

画像を回転


コードをコピーします
コードは次のとおりです。

context.save();
//回転角度パラメータはラジアンです
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);

context.restore();

変換を使用する方法


コードをコピーします
コードは次のとおりです:

// 現在の状態を保存します
context .save();

// Y 値が増加すると、X 値も増加します。
// 影として使用される傾斜した木を作成できます。
// 変換を適用すると、すべての値が増加します。座標は行列と乗算します
context.transform(1, 0,
-0.5, 1,
, 0);

// Y 軸方向に、影の高さを元の値の 60% に変更します
context.scale(1, 0.6);

// トランクを透明度 20% の黒で塗りつぶします
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(-5, -50, 10, 50);

//既存のシャドウ効果を使用してツリーを再描画します
createCanopyPath(context);
context.fill();

//前のキャンバスの状態を復元します
context.restore();

テキスト

context.fillText(text,x,y,maxwidth): テキスト テキストの内容、x、y はテキストの位置を指定します。maxwidth はオプションのパラメーターで、テキストの位置を制限します。
context.drawingText(text,x,y,maxwidth): テキスト テキストの内容、x、y はテキストの位置を指定します。maxwidth はオプションのパラメーターで、テキストの位置を制限します。


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

// キャンバスにテキストを描画します
context.save();

//フォント サイズは 60 で、フォントは Impact です
context.font = "60px Impact";

//塗りつぶしの色
context.fillStyle = '#996600';
//中央
context.textAlign = 'center';

//テキストを描画します
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();

シャドウ

シャドウは、いくつかのグローバル コンテキスト プロパティを通じて制御できます

属性  值  备注
shadowColor  任何CSS中的颜色值 可以使用透明度(alpha)
shadowOffsetX 像素值  值为正数,向右移动阴影;为负数,向左移动阴影
shadowOffsetY 像素值 值为正数,向下移动阴影;为负数,向上移动阴影
shadowBlur 高斯模糊值 值越大,阴影边缘越模糊


コードをコピーします
コードは次のとおりです:

// カラー 黒、20 % 透明度
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

// 右に 15 ピクセル、左に 10 ピクセル移動
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// わずかにぼやけた影
context.shadowBlur = 2;

ピクセルデータ

context.getImageData(sx, sy, sw, sh): sx, xy は点を決定します、sw: 幅、sh: 高さ。

この関数は 3 つの属性を返します: 幅 各行のピクセル数 高さ 各列のピクセル数

Canvas から取得した各ピクセルの RGBA 値 (値の赤、緑、青、透明度) のデータのグループ。

context.putImageData(imagedata,dx,dy): 開発者が画像データのセットを渡すことができます。dx と dy を使用すると、関数は指定されたキャンバスの位置にジャンプします。 🎜>

受信したピクセル データを表示します。

canvas.toDataUrl: キャンバス上に現在表示されているデータはプログラムで取得でき、取得されたデータはテキスト形式で保存され、ブラウザーで画像に解析できます。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是什么意思html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法:1、给td元素添加“border:none”无边框样式即可,语法“td{border:none}”。2、给td元素添加“border:0”样式,语法“td{border:0;}”,将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式,语法“td{border:transparent;}”,将td边框的颜色设置为透明即可。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター