HTML5 canvas （二）-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 canvas （二）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 17, 2016 am 09:09 AM

adminhtml5

绘制图片主要有这三种方式，从下图能很清楚的知道各个参数的作用

drawImage(image,dx,dy)
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
drawImage(image,dx,dy,dw,dh)
其中的 image 参数可以是 HTMLImageElement（img标签的元素）、HTMLCanvasElement （canvas标签的元素）和HTMLVideoElement（video的元素）中的任一个对象。

下面以坦克大战的地图来示意怎么使用，其中资源图片为右图

先上基本结构，上节有讲过

<script></script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");

然后创建一个图片

var mapImg =new Image();//创建一个图片
mapImg.src = "http://www.w3cfuns.com/data/attachment/forum/201107/26/194717f9ijaam199j9jvkv.png"//坦克地图的图片地址，它的宽为64，高为16。

然后就可以画图了

context.drawImage(mapImg); //在坐标0,0处画图，宽高为图片本身的宽高
context.drawImage(mapImg, 100, 100); //在坐标100, 100处画图，宽高为图片本身的宽高
context.drawImage(mapImg, 100, 200, 640, 233); //在坐标100, 200处画图，宽 640，高 233
context.drawImage(mapImg, 16, 0, 16, 16, 200, 100, 64, 64);//在坐标200,100处画图，宽64，高64，图内容为
距原图左边16，上边0的一个大小为16,16的截图

自己可以试验下[html]

function drawTile(x, y, type)//参数分别为坐标x,y，和地图的类型
function drawTile(x, y, type)
{
context.drawImage(mapImg, type * 16, 0, 16, 16, x, y, 16, 16); //type*16为距原图左边界距离
}

再试着运行下
[html]

var map =var map =
[
[0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0],
[0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0],
[3,3,3,3,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,3,3],
[3,3,3,3,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,3,3],
[3,3,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,2,2],
[3,3,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
[2,2,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0],
[0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,1,0,0,0],
[4,4,0,0,0,1,0,0,2,0,0,0,2,0,0,0,1,1,1,0,0,0,0,0,0,0],
[4,4,0,0,0,1,0,0,2,0,0,0,2,0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,4,4,4,4],
[0,0,0,0,1,1,0,0,1,1,1,0,0,0,0,1,1,1,1,0,0,0,4,4,4,4],
[0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
[0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
[0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0],
[0,0,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,0,0,3,3],
[0,0,1,1,1,1,1,1,0,0,1,1,1,1,0,0,1,1,1,1,1,1,0,0,3,3],
[3,3,0,0,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,0,0,3,3,3,3],
[3,3,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,3,3,3,3],
[2,2,3,3,0,0,0,0,0,0,0,1,2,2,1,0,0,0,0,0,3,3,3,3,2,2],
[2,2,3,3,0,0,0,0,0,0,0,1,2,2,1,0,0,0,0,0,3,3,3,3,2,2],
];

声明

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

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか？Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

H5リンクを作成する方法は？リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成：＆lt; a＆gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定（オプション）：必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加：リンクを表示するWebページにHTMLアンカーコードを追加します。

H5互換性の問題を解決する方法Apr 06, 2025 pm 12:36 PM

H5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

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