キャンバスで線を引く方法-H5 チュートリアル-php.cn

キャンバスで線を引く方法

php中世界最好的语言

リリース： 2018-03-14 09:45:17

オリジナル

2363 人が閲覧しました

今回は、キャンバスを使って線を引く方法と、キャンバスを使って線を引くときの注意点を紹介します。以下に実際の事例を示しますので、見てみましょう。

canvas は html5 の新しいタグです。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"/>
    <title>Canvas绘图与动画基础</title></head><body><style>
    #canvas{        border: 1px solid #aaa;        text-align: center;
    }</style><canvas id="canvas" width="1024" height="768">
    当用户浏览器不支持Canvas,请更换浏览器重试！</canvas></body></html>

ログイン後にコピー

canvasタグに対応していないブラウザの場合、通常はcanvasタグ内のフォントが表示されます。
それでは、線を描き始めましょう。
まず、キャンバスを取得します:

var canvas = document.getElementById("canvas");

ログイン後にコピー

キャンバスの幅と高さは通常、スタイルでは設定されません。上記の HTML に示すように、同じレベルのキャンバスと ID で設定することも、js を使用して設定することもできます。

canvas.width=1014;
 canvas.height=768;

ログイン後にコピー

描画のコンテキストを取得してください

var context = canvas.getContext("2d");

ログイン後にコピー

通常、キャンバスを操作するためにコンテキストを使用します。さあ、コードでそれについて詳しく学びましょう:

        var context = canvas.getContext("2d");//得到绘图的上下文环境
        context.beginPath();//开始绘制线条，若不使用beginPath，则不能绘制多条线条
        context.moveTo(100, 100);//线条开始位置
        context.lineTo(700, 700);//线条经过点
        context.lineTo(100, 700);
        context.lineTo(100, 100);
        context.closePath();//结束绘制线条，不是必须的
       
        context.lineWidth = 5;//设置线条宽度
        context.strokeStyle = "red";//设置线条颜色
        context.stroke();//用于绘制线条
        context.beginPath();
        context.moveTo(200, 100);
        context.lineTo(700, 600);
        context.closePath();
        context.strokeStyle = "black";
        context.stroke();

ログイン後にコピー

上記のコードを実行して、赤色を閉じます。下の図に示すように、三角形と黒い実線が表示されます:

キャンバスで線を引く方法