HTML5キャンバスを始めるためのコード例の詳細な説明（図）-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5キャンバスを始めるためのコード例の詳細な説明（図）

黄舟

Mar 15, 2017 pm 04:11 PM

1) HTMLCanvasElementオブジェクトのメンバー:

height—canvas要素のheight属性に対応します。幅

— —

Canvas 要素の width 属性に対応します。 2) 長方形を描画します:

fillRect(x,y,w,h)—塗りつぶされた長方形を描画します

そう、 w,h)—中空の四角形を描画します。 3) キャンバス描画の設定 Status : li

neW

idth—線の幅を取得または設定します (デフォルト値は 1.0)。 lineJoin—を取得または設定します。ラインがグラフィックに接続されているときのスタイル (マイターのデフォルト値);

fillStyle - ソリッドグラフィックに使用されるスタイルを取得または設定します (デフォルト値は黒です); - 線に使用されるスタイルを取得または設定します

(デフォルトは黒)。

canvas{
            border:medium double black;
            margin: 4px;
        }
        body > *{
            float: left;
        }

ログイン後にコピー

<canvas id="canvas1" width="500" height="200">
        您的浏览器不支持<code>canvas</code>!
    </canvas>

ログイン後にコピー

4) グラデーションを使用する createLinearGradient(x0,y0 ,x1,y1)—線形グラデーションを作成し、CanvasGradient オブジェクトを返します。

createRadialGradient(x0,y0,r0,x1,y1,r1)—放射状グラデーションを返し、CanvasGradient オブジェクトを返します。 ;color>) - ソリッドを追加しますグラデーションの線に色を付けます

    <canvas id="canvas6" width="500" height="140">
        您的浏览器不支持<code>canvas</code>!
    </canvas>

ログイン後にコピー

    <script>
        //使用径向渐变
        var ctx=document.getElementById("canvas6").getContext("2d");
        var grad=ctx.createRadialGradient(250,70,20,200,60,100);
        grad.addColorStop(0,"red");
        grad.addColorStop(0.5,"white");
        grad.addColorStop(1,"black");
        ctx.fillStyle=grad;
        ctx.fillRect(0,0,500,140);
    </script>

ログイン後にコピー

    <canvas id="canvas7" width="500" height="140">
        您的浏览器不支持<code>canvas</code>!
    </canvas>

ログイン後にコピー

    <script>
        //使用较小的图形和径向渐变
        var ctx=document.getElementById("canvas7").getContext("2d");
        var grad=ctx.createRadialGradient(250,70,20,200,60,100);
        grad.addColorStop(0,"red");
        grad.addColorStop(0.5,"white");
        grad.addColorStop(1,"black");
        ctx.fillStyle=grad;
        ctx.fillRect(150,20,75,50);
        ctx.lineWidth=8;
        ctx.strokeStyle=grad;
        ctx.strokeRect(250,20,75,50);
    </script>

ログイン後にコピー

5）使用图案

createPattern(,int2)——创建图案，指定图案文件的来源和重复方式；

int2的值是指定重复样式：分别有repeat、repeat-x、repeat-y、no-repeat;

    <canvas id="canvas8" width="500" height="150">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <img id="banana" hidden src="images/banana-small.png"/>

ログイン後にコピー

    <script>
        //使用图像类的图案
        var ctx=document.getElementById("canvas8").getContext("2d");
        var imageElem=document.getElementById("banana");
        var pattern=ctx.createPattern(imageElem,"repeat");
        ctx.fillStyle=pattern;
        ctx.fillRect(0,0,500,148);
    </script>

ログイン後にコピー

6)保存和恢复状态

save()——保存绘制状态属性的值，并把它们推入状态栈；

restore()——取出状态栈的第一组值，用它们来设置绘制状态；

    <canvas id="canvas9" width="500" height="150" preload="auto">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <p>
        <button>Save</button>
        <button>Restore</button>
    </p>

ログイン後にコピー

    <script>
        //保存和恢复状态
        var ctx=document.getElementById("canvas9").getContext("2d");
        var grad=ctx.createLinearGradient(500,0,500,140);
        grad.addColorStop(0,"red");
        grad.addColorStop(0.5,"white");
        grad.addColorStop(1,"black");
        var colors=["black",grad,"red","green","yellow","black","grey"];
        var cIndex=0;
        ctx.fillStyle=colors[cIndex];
        draw();
        var buttons=document.getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick=handleButtonPress;
        }
        function handleButtonPress(e){
            switch(e.target.innerHTML){
                case &#39;Save&#39;:
                    ctx.save();
                    cIndex=(cIndex+1)%colors.length;
                    ctx.fillStyle=colors[cIndex];
                    draw();
                    break;
                case &#39;Restore&#39;:
                    cIndex=Math.max(0,cIndex-1);
                    ctx.restore();
                    draw();
                    break;
            }
        }
        function draw(){
            ctx.fillRect(0,0,500,140);
        }
    </script>

ログイン後にコピー

7）绘制图像

drawImage方法——在画布上绘制图像，指定一个img、canvas或video元素作为来源；

    <canvas id="canvas10" width="500" height="150" preload="auto">
        您的浏览器不支持<code>canvas</code>!
    </canvas>
    <img id="banana2" hidden src="images/banana-small.png"/>

ログイン後にコピー

    <script>
        //使用drawImage方法
        var ctx2=document.getElementById("canvas10").getContext("2d");
        var imageElement=document.getElementById("banana2");
        ctx2.drawImage(imageElement,10,10);
        ctx2.drawImage(imageElement,120,10,100,120);
        ctx2.drawImage(imageElement,20,20,100,50,250,10,100,120);
    </script>

ログイン後にコピー

    <video id="vid" src="raw/timessquare.webm" controls preload="auto" width="360" height="240">
        您的浏览器不支持；
    </video>
    <canvas id="canvas11" width="360" height="240">
        您的浏览器不支持；
    </canvas>
    <p>
        <button id="pressme">Snapshot</button>
        <button id="pressme2">PressMe</button>
    </p>
    <canvas id="canvas12" width="360" height="240">
        您的浏览器不支持；
    </canvas>

ログイン後にコピー

    <script>
        //使用视频作为drawImage方法的来源
        var ctx3=document.getElementById("canvas11").getContext("2d");
        var imageElement3=document.getElementById("vid");
        document.getElementById("pressme").onclick=function(e){
            ctx3.drawImage(imageElement3,0,0,360,240);
        }
        var width=100;
        var height=10;
        ctx3.lineWidth=5;
        ctx3.strokeStyle="red";
        setInterval(function(){
            ctx3.drawImage(imageElement3,0,0,360,240);
            ctx3.strokeRect(180-(width/2),120-(height/2),width,height);
        },25);
        setInterval(function(){
            width=(width-1)%200;
            height=(height+3)%200;
        },100);
    </script>
    <script>
        //将画布作为drawImage方法的来源
        var srcCanvasElement=document.getElementById("canvas11");
        var ctx4=srcCanvasElement.getContext("2d");
        var ctx5=document.getElementById("canvas12").getContext("2d");
        var imageElement4=document.getElementById("vid");
        document.getElementById("pressme2").onclick=takeSnapshot;
        var width=100;
        var height=10;
        ctx4.lineWidth=5;
        ctx4.strokeStyle="red";
        ctx5.lineWidth=30;
        ctx5.strokeStyle="black";
        setInterval(function(){
            ctx4.drawImage(imageElement4,0,0,360,240);
            ctx4.strokeRect(180-(width/2),120-(height/2),width,height);
        },25);
        setInterval(function(){
            width=(width+1)%200;
            height=(height+3)%200;
        },100);
        function takeSnapshot(){
            ctx5.drawImage(srcCanvasElement,0,0,360,240);
            ctx5.strokeRect(0,0,360,240);
        }
    </script>

ログイン後にコピー