Canvas 学習シリーズ 1: Canvas の入門-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

Canvas 学習シリーズ 1: Canvas の入門

巴扎黑

Jun 23, 2017 pm 02:50 PM

canvas 最初の知り合い勉強シリーズ

あなたは最近 Canvas を学習し始めました。Canvas の学習プロセス全体のメモと要約を記録する予定です。不備がある場合は、指摘してください。

1. Canvas の紹介

Canvas 要素の登場は、Web 世界でのアニメーションとグラフィックの描画への扉を開くものであると言えます
要素は HTML5 要素の中で最も強力な機能であり、その機能は主に Canvas の Context (描画コンテキスト/描画環境) オブジェクトを通じて表現されます。このオブジェクトはキャンバス自体から取得されます。

var canvas = getElementById('canvas');var context = canvas.getContext('2d');

ログイン後にコピー

2. Canvas のバッキングコンテンツ

このテキストは「バッキングコンテンツ」と呼ばれ、ブラウザが Canvas 要素をサポートしていない場合にのみ表示されます。テキストコンテンツを表示します

<canvas>当前浏览器不支持canvas元素，请更换浏览器</canvas>

ログイン後にコピー

3. Canvas 要素のデフォルトの幅は 300px、高さは 150px です。

キャンバスの幅と高さの属性を使用してキャンバスのサイズを変更することもできます。また、CSS を使用してキャンバス要素のサイズを変更することもできます。ただし、2 つの変更には違いがあります。

canvas には実際には 2 つのサイズのセットがあります:

1 つは Canvas 要素のサイズで、もう 1 つは Canvas 描画面のサイズです。

キャンバス属性の幅と高さを使用するとき、実際には要素のサイズと描画面のサイズを同時に変更します

CSSを使用して設定する場合、キャンバスのサイズ要素は変更されます、いいえ、それは描画面のサイズに影響します。このとき、ブラウザーは描画面を拡大縮小し、得たくない効果が発生します

width 属性と height 属性でキャンバスのサイズを変更します

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);</script>

ログイン後にコピー

CSS を使用してキャンバス要素のサイズを変更する場合のパフォーマンス

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>#canvas {
            margin: 0 auto;
            padding: 0;
            width: 600px;
            height: 300px;
            border: 1px solid #ccc;
        }</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);</script>
</body>
</html>

ログイン後にコピー

だからいつCanvas 要素のサイズを設定します。設定には CSS を使用しないことをお勧めします。次のように設定できます

<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>

ログイン後にコピー

または

<script type="text/javascript">var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';</script>

ログイン後にコピー

4. canvas API

canvas元素并未提供很多API，它只提供了两个属性三个方法，而绘图功能的方法与属性全都是canvas的绘图环境（context）对象提供。

width：设置/获取canvas元素绘图表面的宽度，默认值为300。
height：设置/获取canvas元素绘图表面的高度，默认值为150。
getContext(): 返回canvas元素的绘图环境对象。
toDataURL(): 描述：返回一个data URI：会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
toBold(): 描述：创建Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由User Agent( 用户代理端 )自行决定。

toDataURL():

　 type 可选参数

　　图片格式，默认为 image/png

　　encoderOptions 可选参数

　　当图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。

　　如果超出取值范围，将会使用默认值 0.92，默认分辨率为96dpi。

　　这里值得注意：

如果canvas的高度或者宽度为0时，会返回字符串 "data:,"
如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头，说明传入的类型不支持
Chrome支持“image/webp”类型

　　尽管在默认情况下canvas对象是一副位图，但是并不是HTML中的img元素，所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲canvas。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸问题</title>
    <style>#canvas {
            margin: 0 auto;
            padding: 0;
            display: none;
        }</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage');
    canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';var cxt  = canvas.getContext('2d');
    cxt.font = "38px Arial";
    cxt.fillStyle = "#427ACC";
    cxt.strokeStyle = "#00116A";
    cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
    cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);var dataUrl = canvas.toDataURL();
    dataImage.src = dataUrl;</script>
</body>
</html>

ログイン後にコピー

toBold():

目前该方法只有Firefox与IE10浏览器支持

参考文章：

MDN Web 技术文档

以上がCanvas 学習シリーズ 1: Canvas の入門の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1662

CakePHP チュートリアル

1418

Laravel チュートリアル

1311

PHP チュートリアル

1261

C# チュートリアル

1234

Related knowledge

Xiaomi 15シリーズの完全なコードネームが明らかに：Dada、Haotian、Xuanyuan Aug 22, 2024 pm 06:47 PM

Xiaomi Mi 15シリーズは10月に正式リリースされる予定で、その全シリーズのコードネームが海外メディアのMiCodeコードベースで公開されている。その中でもフラッグシップモデルであるXiaomi Mi 15 Ultraのコードネームは「Xuanyuan」（「玄源」の意味）です。この名前は中国神話に登場する高貴さを象徴する黄帝に由来しています。 Xiaomi 15のコードネームは「Dada」、Xiaomi 15Proのコード名は「Haotian」（「好天」の意味）です。 Xiaomi Mi 15S Proの内部コード名は「dijun」で、「山と海の古典」の創造神である淳皇帝を暗示しています。 Xiaomi 15Ultra シリーズのカバー

Pygame 入門: 包括的なインストールと構成のチュートリアル Feb 19, 2024 pm 10:10 PM

Pygame をゼロから学ぶ: 完全なインストールと構成チュートリアル、特定のコード例が必要はじめに: Pygame は、Python プログラミング言語を使用して開発されたオープンソースのゲーム開発ライブラリであり、豊富な機能とツールを提供し、開発者はさまざまなタイプのゲームを簡単に作成できますゲームの。この記事は、Pygame をゼロから学習するのに役立ち、完全なインストールと構成のチュートリアルと、すぐに始めるための具体的なコード例を提供します。パート1：最初にPythonとPygameをインストールして、確認してください

Huawei Mate 60シリーズ、新しいAI排除+イメージアップグレード、秋のプロモーションを楽しむのに最適な時期 Aug 29, 2024 pm 03:33 PM

昨年Huawei Mate60シリーズが発売されて以来、個人的にはMate60Proをメインで使っています。ほぼ1年の間に、Huawei Mate60Proは複数のOTAアップグレードを受け、全体的なエクスペリエンスが大幅に向上し、人々に常に新しい感覚を与えました。たとえば、最近、Huawei Mate60 シリーズは再びイメージング機能の大幅なアップグレードを受けました。 1 つ目は、新しい AI 除去機能で、通行人やゴミをインテリジェントに除去し、空白領域を自動的に埋めることができます。2 つ目は、メインカメラの色の精度と望遠の鮮明さが大幅に向上しました。新学期シーズンであることを考慮して、Huawei Mate60シリーズは秋のプロモーションも開始しました。携帯電話の購入時に最大800元の割引が受けられ、開始価格は4,999元という低価格です。よく使われる、価値の高い新製品が多い

C言語の魅力に迫る～プログラマーの可能性を引き出す～ Feb 24, 2024 pm 11:21 PM

C言語学習の魅力：プログラマーの可能性を引き出すテクノロジーの発展に伴い、コンピュータプログラミングは大きな注目を集めている分野です。数あるプログラミング言語の中でもC言語は常にプログラマーに愛されています。そのシンプルさ、効率性、幅広い用途により、C 言語の学習は、多くの人にとってプログラミングの分野に入る最初のステップとなっています。この記事では、C言語を学ぶ魅力と、C言語を学ぶことでプログラマーの可能性を引き出す方法について解説します。 C言語学習の魅力は、まずその簡単さにあります。他のプログラミング言語と比較すると、C言語は

キャンバスフレームワークを学び、一般的に使用されるキャンバスフレームワークについて詳しく説明します Jan 17, 2024 am 11:03 AM

Canvas フレームワークを探索する: 一般的に使用される Canvas フレームワークを理解するには、特定のコード例が必要です。はじめに: Canvas は HTML5 で提供される描画 API であり、これを通じて豊富なグラフィックスやアニメーション効果を実現できます。描画の効率と利便性を向上させるために、多くの開発者がさまざまな Canvas フレームワークを開発しました。この記事では、一般的に使用される Canvas フレームワークをいくつか紹介し、読者がこれらのフレームワークの使用方法をより深く理解できるように、具体的なコード例を示します。 1.EaselJSフレームワークEa

Wordでルート番号を入力する方法を一緒に学びましょう Mar 19, 2024 pm 08:52 PM

Word でテキストコンテンツを編集するときに、数式記号の入力が必要になる場合があります。 Word でルート番号を入力する方法を知らない人もいるので、Xiaomian は私に、Word でルート番号を入力する方法のチュートリアルを友達と共有するように頼みました。それが私の友達に役立つことを願っています。まず、コンピュータで Word ソフトウェアを開き、編集するファイルを開き、ルート記号を挿入する必要がある場所にカーソルを移動します。下の図の例を参照してください。 2. [挿入]を選択し、記号内の[数式]を選択します。下の図の赤丸で示すように: 3. 次に、下の[新しい数式を挿入]を選択します。以下の図の赤丸で示すように: 4. [根号式]を選択し、適切な根号を選択します。下の図の赤丸で示したように、

Go言語のmain関数をゼロから学ぶ Mar 27, 2024 pm 05:03 PM

タイトル: Go言語のmain関数をゼロから学ぶ Go言語はシンプルで効率的なプログラミング言語として開発者に好まれています。 Go 言語では、main 関数はエントリ関数であり、すべての Go プログラムにはプログラムのエントリポイントとして main 関数が含まれている必要があります。この記事ではGo言語のmain関数をゼロから学ぶ方法と具体的なコード例を紹介します。 1. まず、Go 言語開発環境をインストールする必要があります。公式ウェブサイト (https://golang.org) にアクセスできます。

ゲーム開発におけるキャンバスの強力な役割と応用を探る Jan 17, 2024 am 11:00 AM

ゲーム開発におけるキャンバスの力と応用を理解する概要: インターネット技術の急速な発展に伴い、Web ゲームはプレイヤーの間でますます人気が高まっています。 Web ゲーム開発の重要な部分として、キャンバステクノロジーがゲーム開発に徐々に登場し、その強力なパワーと応用性を示しています。この記事では、ゲーム開発におけるキャンバスの可能性を紹介し、具体的なコード例を通じてその応用例を示します。 1. Canvas テクノロジの概要 Canvas は HTML5 の新しい要素で、これにより次のことが可能になります。

See all articles

Canvas 学習シリーズ 1: Canvas の入門

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック