HTML5キャンバスの詳しい解説(5)-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5キャンバスの詳しい解説(5)

黄舟

Mar 17, 2017 pm 03:50 PM

drawImage は合計 3 つのメソッドを提供します:

1. キャンバス上に画像を配置します。

context.drawImage(img,x,y);

ログイン後にコピー

2. キャンバス上に画像を配置し、画像の幅と高さを指定します。

context.drawImage(img,x,y,width,height);

ログイン後にコピー

3. 画像を切り抜き、切り取った部分をキャンバス上に配置します。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

ログイン後にコピー

パラメータ	説明
img	使用する画像、キャンバス、またはビデオを指定します。
sx	画像のx座標位置の切り出しを開始します。
sy	画像のy座標位置の切り出しを開始します。
swidth	トリミングされた画像の幅。
sheight	切り取られた画像の高さ。
x	画像のx座標位置をキャンバス上に配置します。
y	画像のy座標位置をキャンバス上に配置します。
width	描画する画像の幅。 (画像を拡大または縮小します)
高さ	描画する画像の高さ。 (画像を拡大または縮小します)

次のコードには、画像をキャンバスに描画する上記の 3 つのメソッドが含まれています:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>canvas绘图</title>
    <script>
    window.onload = function()
    {
        drawCanvas1();
        drawCanvas2();
        drawCanvas3();
    }
    //context.drawImage(img,x,y);
    function drawCanvas1()
    {
        var canvas = document.getElementById("myCanvas1");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        {
            context.drawImage(img, 0, 0);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,x,y)画原图", 250, 350);
    }

    //context.drawImage(img,x,y,width,height);
    function drawCanvas2()
    {
        var canvas = document.getElementById("myCanvas2");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        {
            context.drawImage(img, 0, 0, 500, 300);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,x,y,width,height)指定宽和高进行拉伸和缩放", 250, 350);
    }

    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    function drawCanvas3()
    {
        var canvas = document.getElementById("myCanvas3");
        var context = canvas.getContext("2d");
        //将图片绘制到canvas上
        var img = new Image();
        img.src = "1.jpg";
        img.onload = function()
        { 
            context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200);
        };

        context.textAlign = "center";
        context.fillText("context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)", 250, 350);
        context.fillText("裁切图片的一部分绘制在画布上，并可进行缩放", 250, 370);
    }

    </script>
</head>
<body>
    <canvas id="myCanvas1" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <canvas id="myCanvas2" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <canvas id="myCanvas3" width="500" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <br />
</body>
</html>

ログイン後にコピー

効果は次のとおりです:
HTML5キャンバスの詳しい解説(5)
最初の画像: context.drawImage(img, 0, 0 ) はキャンバス (0,0) から描画を開始し、画像の元のサイズで描画します。
2 番目の図: context.drawImage(img, 0, 0, 500, 300) は、キャンバス (0,0) から描画を開始し、描画されるイメージの幅と高さがそれぞれ 500 と 300 であることを指定します。元の画像は伸縮します。
3 番目の図: context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200); は、画像の (200,100) 位置から開始して、幅と高さ 200 と 200 の部分をトリミングすることを意味します。キャンバスの(0,0)の位置に、描画画像の幅を200、高さを200に指定して配置します。