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

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

巴扎黑

リリース： 2017-06-23 14:50:41

オリジナル

1728 人が閲覧しました

あなたは最近 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 サイトの他の関連記事を参照してください。