あなたはキャンバス（b）は知りません

その他 2019-11-02 20:11:15 訪問数: null

あなたはキャンバス（b）は知りません

色色

これまでのところ、我々は唯一のコンテンツを描画するための方法を見てきました。我々はカラーグラフィックスにしたい場合は、そこに行うことができる2つの重要な属性は、次のとおりfillStyleとstrokeStyle。

  • fillStyle = color

    塗りつぶしの色のパターンを設定します。

  • strokeStyle = color

    カラーグラフィックアウトラインを設定します。

colorこれは、CSSカラー値をオブジェクトのオブジェクトまたはグラデーションパターンを表す文字列であってもよいです。デフォルトでは、ラインと塗りつぶしの色によって黒（CSSカラー値です#000000）。

入力に沿ったものでなければなりませんCSS3標準カラー値有効な文字列。以下の実施例は、同じ色を記述する。

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

1.fillStyle--パレット

本例では、2つの使用forの円形アレイは、異なる色の各正方形を正方形を描画します。結果は正しいですが、そうではない華麗で使用されるコードの実現。I i及びjは不変青チャネルの値を維持しながらのみ、赤と緑チャネルの値を変更し、各正方形のためのユニークなRGB色を生成するために、2つの変数を使用します。あなたはこれらのカラーチャンネルの値を変更することで、パレットのすべての種類を生成することができます。周波数勾配を大きくすることで、あなたはまた、Photoshopの内部のパレットの似たようなものを描くことができます。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var ctx = document.getElementById('myCanvas').getContext('2d');
            for (var i = 0; i < 6; i++) {
                for (var j = 0; j < 6; j++) {
                    ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ','
                        + Math.floor(255 - 42.5 * j) + ',0)';
                    ctx.fillRect(j * 25, i * 25, 25, 25)
                }
            }
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

2. strokeStyle - カラフルな円弧

この例では、上記に多少似ているが、今回は使用strokeStyleこれは正方形ではないこと、財産を、しかしでarc円を描画する方法。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('myCanvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                for (var i = 0; i < 6; i++) {
                    for (var j = 0; j < 6; j++) {
                        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
                            Math.floor(255 - 42.5 * j) + ')';
                        ctx.beginPath();
                        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
                        ctx.stroke();
                    }
                }
            }
        }
    </script>
</head>

<body onload="draw()">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150" style="margin: 100px 100px;"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

第二に、透明性の透明性

ソリッドカラーのドローグラフィックスに加えて、我々はまた、半透明のグラフィックスを描画するためにキャンバスを使用することができます。設定によってglobalAlphaプロパティまたは輪郭として半透明の色を使用するか、パターンを埋めます。

  • globalAlpha = transparencyValue

    このプロパティは、デフォルト値は1.0であり、1.0（完全に不透明）に（完全に透明）0.0の値の有効範囲内のすべてのキャンバスのグラフィックスの透明度に影響を与えます。

globalAlphaプロパティの大多数では、透明性に図形を描画するために同じ必要性を持っています。しかし、私は次のような方法は、もう少し実用的でできると思います。

ためstrokeStyle及びfillStyle特性はCSS 3仕様のカラー値を受け入れて、我々は、透明色を割り当てるために、次の表記法を使用することができます。

// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

rgba()この方法とrgb()同様に、透明性のための1つの色パラメータを持つことになります。その有効範囲は0.0（完全に透明）から1.0（完全に不透明）です。

1. globalAlpha--四色の放射半透明の円形フレーム

この例では、設定された背景フレーム、の4色globalAlphaに0.2塗り円半径増分半透明の上記シリーズで、。最終結果は、半径方向勾配です。より透明に重畳された円は、元々描かれた円は低くなります。サイクルの数を増やすことによって、縁部に中心からより多くの円を描く、背景効果が徐々に消える現れます。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('myCanvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                // 画背景
                ctx.fillStyle = '#FD0';
                ctx.fillRect(0, 0, 75, 75);
                ctx.fillStyle = '#6C0';
                ctx.fillRect(75, 0, 75, 75);
                ctx.fillStyle = '#09F';
                ctx.fillRect(0, 75, 75, 75);
                ctx.fillStyle = '#F30';
                ctx.fillRect(75, 75, 75, 75);
                ctx.fillStyle = '#FFF';

                // 设置透明度值
                ctx.globalAlpha = 0.2;

                // 画半透明圆
                for (var i = 0; i < 7; i++) {
                    ctx.beginPath();
                    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
                    ctx.fill();
                }
            }
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

2. rgba--四色放射矩形グリッド

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('myCanvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                // 画背景
                ctx.fillStyle = 'rgb(255,221,0)';
                ctx.fillRect(0, 0, 150, 37.5);
                ctx.fillStyle = 'rgb(102,204,0)';
                ctx.fillRect(0, 37.5, 150, 37.5);
                ctx.fillStyle = 'rgb(0,153,255)';
                ctx.fillRect(0, 75, 150, 37.5);
                ctx.fillStyle = 'rgb(255,51,0)';
                ctx.fillRect(0, 112.5, 150, 37.5);

                // 画半透明矩形
                for (var i = 0; i < 10; i++) {
                    ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
                    for (var j = 0; j < 4; j++) {
                        ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5)
                    }
                }
            }
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

第三に、リニアラインスタイル

スタイルラインは、一連の属性を使用して設定することができます。

  • lineWidth = value

    線幅を設定します。

  • lineCap = type

    ラインスタイルのヒントを設定します。

  • lineJoin = type

    ラインのスタイルラインと間接的な関与を設定します。

  • miterLimit = value

    二行が交差する接合部の最大長さ制限（マイター長）の接合長と呼ばれること外側コーナーの頂点に線接合内角の頂点の長さを指します。

  • getLineDash()

    非負の偶数の配列の長さを含む、現在のダッシュパターンを返します。

  • setLineDash(segments)

    現在のダッシュスタイルを設定します。

  • lineDashOffset = value

    オフセットダッシュパターンを開始設定します。

それはより容易に、以下の実施例により理解することができます。

1. lineWidth属性の例

このプロパティは、現在の線画の厚さです。属性値は正でなければなりません。デフォルト値は1.0です。

これは、両側の所定の厚さの中心へのパスの線幅を指します。換言すれば、描画の幅の各半分の両側にパス。カンバス座標と特別な注意を払うときに、正確な水平または垂直線を得ることが所望される場合、画素は、直接対応しないからです。

次の例では、10本の直線の幅の増加に伴って描かれています。1.0単位の左端の線幅。さらに、左端とすべての奇数ラインの幅は、位置決めパスので、この問題は発生しません。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var ctx = document.getElementById('myCanvas').getContext('2d');
            for (var i = 0; i < 10; i++) {
                ctx.beginPath();
                ctx.lineWidth = 1 + i;
                ctx.moveTo(5 + i * 14, 5);
                ctx.lineTo(5 + i * 14, 140);
                ctx.stroke();
            }
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

2. lineCap属性の例

IMGプロパティlineCap値は、表示セグメントエンドポイントの外観を決定します。これは、次の3のいずれかになりますbutt、roundとsquare。デフォルトはbutt。

この場合、私は3行、それぞれ与えられた異なる描いたlineCap値を。より明確に両者の差見られるように2人のガイドがありますが、開始点と終了点が3行に落ちるは補助線です。

デフォルトで左のラインbutt。ガイドと同一平面であることに留意されたいです。中央round半径半線幅プラス半円を有する端部。それは右でsquare同じ幅と高さを加えたボックスの幅の半分のエンドポイントでの効果。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var ctx = document.getElementById('myCanvas').getContext('2d');

            var lineCap = ['butt', 'round', 'square'];

            // 创建路径
            ctx.strokeStyle = '#09f';
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(140, 10);
            ctx.moveTo(10, 140);
            ctx.lineTo(140, 140);
            ctx.stroke();

            // 画线条
            ctx.strokeStyle = 'black';
            for (var i = 0; i < lineCap.length; i++) {
                ctx.lineWidth = 15;
                ctx.lineCap = lineCap[i];
                ctx.beginPath();
                ctx.moveTo(25 + i * 50, 10);
                ctx.lineTo(25 + i * 50, 140);
                ctx.stroke();
            }
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

属性3.たlineJoinの例

IMGlineJoinプロパティ値は、構内接続された二つのセグメントのグラフィカル表示の外観を決定します。：それは、これらの3つのタイプのいずれかround、bevelおよびmiter。デフォルトmiter``。

ここで私は3つのポリラインの例と同じ操作を行い、異なる設定lineJoin値を。トップ一つであるround角部が丸みを帯びているの効果、円の半径は線幅と同じです。中間体及び最下部、それぞれマイタとベベル効果。値がある場合miter、時間セグメントは、以下の導入への拡張の効果によって、一点まで接続外側に延長するmiterLimit制限属性。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var ctx = document.getElementById('myCanvas').getContext('2d');
            var lineJoin = ['round', 'bevel', 'miter'];
            ctx.lineWidth = 10;
            for (var i = 0; i < lineJoin.length; i++) {
                ctx.lineJoin = lineJoin[i];
                ctx.beginPath();
                ctx.moveTo(-5, 5 + i * 40);
                ctx.lineTo(35, 45 + i * 40);
                ctx.lineTo(75, 5 + i * 40);
                ctx.lineTo(115, 45 + i * 40);
                ctx.lineTo(155, 5 + i * 40);
                ctx.stroke();
            }
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

4.破線

使用setLineDash方法およびlineDashOffset開発する属性ダッシュパターンをsetLineDashギャップを指定したセグメントを交互に配列し、受け入れるための方法と、lineDashOffsetプロパティが開始オフセット。

この例では、アリのラインの効果を作成します。それは、多くの場合、動的効率のコンピュータグラフィックスプログラムの選択ツールで使用されています。これにより、ユーザーはボーダーアニメーションで背景画像の選択の境界線を区別することができます。

第四に、グラデーショングラデーション

一般的なグラフィックスソフトウェアならば、我々は、塗りまたは線する線状または放射状のグラデーションを使用することができます。私たちは、新しい作成するために、次のメソッドを使用しcanvasGradient、オブジェクトを割り当てるとグラフィックfillStyleやstrokeStyle属性を。

  • createLinearGradient(x1, y1, x2, y2)

    createLinearGradientは、開始点（x1、y1）と終了点（X2、Y2）を表す4つのパラメータを取ります。

  • createRadialGradient(x1, y1, r1, x2, y2, r2)

    createRadialGradient方法は、最初の三つの（X1、Y1）を定義するために、6つのパラメータを取る起源である、半径r1の円は、他の三つのパラメータは、半径r2の円の原点として（X2、Y2）に定義されています。

var lineargradient = ctx.createLinearGradient(0,0,150,150);
var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);

作成しcanvasGradientたオブジェクトを、我々は使用することができますaddColorStop色のそれに方法を。

  • gradient.addColorStop(position, color)

    addColorStop方法は、2つのパラメータを受け取り、positionパラメータは、色勾配の相対位置を表し、0.0と1.0の間の数でなければなりません。たとえば、0.5は色が中央に表示され表します。colorパラメーターは、有効なCSSカラー値（例えば#FFF、RGBA（0,0,0,1）、など）でなければなりません。

必要に応じて、色（カラーストップ）の任意の数を追加することができます。以下は、黒と白の最も単純な線形勾配の一例です。

var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');

1. createLinearGradient例

IMG

本実施形態では、2つの異なる勾配が存在します。最初は、背景色のグラデーションで、あなたは私が2色で同じ位置に設定されていることがわかります、あなたはまた、緑に白からのように、ここで、突然変異の効果を達成するために、変異を、それを使用することができます。一般に、色は順序の定義の対象とは関係ありませんが、色が位置を繰り返すと、順序が非常に重要になります。だから、同じ順序で割り当てと順番にそれを理想的に保つ、結果には大きな問題になりません。

第二の勾配は、私はそれがそれほど厳密ではないので、0.0の場所から色の定義を開始しませんでした。既定の勾配によって、0.5に設定黒色は色に最初から黒の間であると考えられます。

あなたは見つけるでしょう、strokeStyleとfillStyleプロパティを受け入れることができcanvasGradient、オブジェクトを。

2. createRadialGradient例

この例では、私は、4つの異なる放射状のグラデーションを定義しました。あなたは、始点と終点の傾きを制御することができますので、（Photoshopで見られるように）私たちは、より複雑な効果よりも、古典的な放射状のグラデーションのいくつかを達成することができますので。（古典的な半径方向の勾配は、単に中心点の円周によって拡張され、ただ一つの中心点です）

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            // 创建渐变
            var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
            radgrad.addColorStop(0, '#A7D30C');
            radgrad.addColorStop(0.9, '#019F62');
            radgrad.addColorStop(1, 'rgba(1,159,98,0)');

            var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
            radgrad2.addColorStop(0, '#FF5F98');
            radgrad2.addColorStop(0.75, '#FF0188');
            radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

            var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
            radgrad3.addColorStop(0, '#00C9FF');
            radgrad3.addColorStop(0.8, '#00B5E2');
            radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

            var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
            radgrad4.addColorStop(0, '#F4F201');
            radgrad4.addColorStop(0.8, '#E4C700');
            radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

            // 画图形
            ctx.fillStyle = radgrad4;
            ctx.fillRect(0, 0, 150, 150);
            ctx.fillStyle = radgrad3;
            ctx.fillRect(0, 0, 150, 150);
            ctx.fillStyle = radgrad2;
            ctx.fillRect(0, 0, 150, 150);
            ctx.fillStyle = radgrad;
            ctx.fillRect(0, 0, 150, 150);
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

ここでは、球状の3D効果を得ることができますので、私は、少し終わりオフポイントを始めましょう。それは本当に知らない何の効果もありますので、しかし、最高の円形にさせないように、外側部分と重なっています。

最後の4つの放射状のグラデーションの色が透明色の効果です。次の2つの色のソフトな移行、限りそれと一致2色の値を指示します。コードは内部の私は2つの異なる色の表現を使用しているので、教えて、実際には、同じであることができません#019F62 = rgba(1,159,98,1)。

第五に、パターンスタイルパターン

上記の例であり、Iは、循環パターンの効果を達成するために使用されます。実際には、より簡単な方法があります：createPattern。

  • createPattern(image, type)

    この方法は、2つのパラメータを取ります。画像であってもよいImageオブジェクトまたは他のキャンバスオブジェクトへの参照。Type文字列値は、のいずれかでなければなりませんrepeat：以下repeat-x、repeat-yとno-repeat。

注意：キャンバスオブジェクトと同様にImage、Firefox 1.5（Gecko 1.8）でパラメータが無効です。

アプリケーションに非常に類似した勾配を有するパターン、割り当て、後のパターンを作成しfillStyleたりstrokeStyle、属性。

var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img,'repeat');

注意：のdrawImage少し違う、あなたはそうでないパターンが正しい結果ではないかもしれない、イメージオブジェクトがロードされたことを確認する必要があります。

例1. createPattern

最後の例では、私はその後に割り当てられているパターン作成fillStyleプロパティを。唯一の注意点は、画像オブジェクトを使用することでonload、ハンドラは、画像の前に設けられたパターンの読み込みが完了していることを確認するために。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById('myCanvas');
                var ctx = canvas.getContext('2d');

                //创建新Image对象，用做图案
                var img = new Image();
                img.src = 'https://pic.cnblogs.com/avatar/1489272/20190625145401.png';
                img.onload = function() {

                    //创建图案
                    var pattern = ctx.createPattern(img, "repeat");
                    ctx.fillStyle = pattern;
                    ctx.fillRect(0, 0, 150, 150);
                }
            }
        </script>
    </head>
    <body onload="draw();">
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <canvas id="myCanvas" width="150" height="150">

        </canvas>
        <script src="" async defer></script>
    </body>
</html>

示すように、結果：

第六に、影の影

shadowOffsetX = float

shadowOffsetXそしてshadowOffsetY、変換行列によって影響されないXとY軸から延びる影を設定します。負の値は影を示したり、上向きそれは、彼らがデフォルトであり、それは右または下を伸ばすと述べた時間を延長するために左に0。

shadowOffsetY = float

shadowOffsetX及びshadowOffsetY変換行列を受けないXとY軸から延びる影を設定することが影響を受けます。負の値は影を示したり、上向きそれは、彼らがデフォルトであり、それは右または下を伸ばすと述べた時間を延長するために左に0。

shadowBlur = float

shadowBlurシャドウ・セットをぼかすために使用される、その値が画素数にリンクされていない、耐衝撃性マトリックスはまた、デフォルトでは、変換されません0。

shadowColor = color

shadowColorは標準CSS色値を陰影の色の効果を設定するために使用され、完全に透明な黒です。

テキストの影の1例

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script type="text/javascript">
            function draw() {
                var canvas = document.getElementById('myCanvas');
                var ctx = canvas.getContext('2d');

                ctx.shadowOffsetX = 2;
                ctx.shadowOffestY = 2;
                ctx.shadowBlur = 2;
                ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

                ctx.font = '20px Times New Roman';
                ctx.fillStyle = 'red';
                ctx.fillText("Hello, World!", 5, 30);
            }
        </script>
    </head>
    <body onload="draw();">
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <canvas id="myCanvas" width="150" height="150"></canvas>
        <script src="" async defer></script>
    </body>
</html>

示すように、結果：

七、キャンバスは、ルールを埋めます

私たちが使用している場合fill（またはclipとisPointinPathするとき）、あなたは自分の道と交差するパスを入れ子になったか、であるされ、そこに満たされているかどうかを判断するために塗りつぶしどこか外のルールや内部のパスに応じて、塗りつぶしルールを選択することができます便利。

2つの可能な値：

  • **"nonzero**「：非ゼロワインディング・ルール、デフォルト値。
  • **"evenodd"**：偶奇屈曲規則。

この例では、我々はルールを埋めます evenodd

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
            ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
            ctx.fill("evenodd");
        }
    </script>
</head>

<body onload="draw();">
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <canvas id="myCanvas" width="150" height="150"></canvas>
    <script src="" async defer></script>
</body>

</html>

示すように、結果：

おすすめ

転載: www.cnblogs.com/ktddcn/p/11783715.html
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com