HTML5キャンバス

<canvas></canvas> は、HTML5 に登場する新しいタグです。すべての DOM オブジェクトと同様に、js が描画のために呼び出すことができる独自のプロパティ、メソッド、イベントが含まれています。

Canvas とは何ですか?

HTML5 <canvas> 要素はスクリプト (通常は JavaScript) を通じて行われます。グラフィックを描画するにはスクリプトを使用する必要があります。。

Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

基本的に、IE8 とそれ以前のバージョンを除くすべてのブラウザーは <canvas> 要素をサポートします

Canvas 要素を使用して画像を描画するには、

context.fill()//Fill

という 2 つのメソッドがあります。

Context.ストローク()//境界線を描画します

style: グラフィックスを描画する前に、描画スタイルを設定する必要があります

context.fillStyle//塗りつぶしスタイル

context.drawingStyle/ /境界線のスタイル

️境界線スタイルの 16 進カラー値: "#EEEEFF" rgb(1-255,1-255,1-255) ) rgba(1-255,1-255,1-255、透明度)

Canvas を使用して直線を描画します:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>php.cn</title>
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.moveTo(20,30);//第一个起点
            cans.lineTo(120,90);//第二个点
            cans.lineTo(220,60);//第三个点（以第二个点为起点）
            cans.lineWidth=3;
            cans.strokeStyle = 'red';
            cans.stroke();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

Canvas 座標

canvas は 2 次元のグリッドです。

キャンバスの左上隅の座標は(0,0)です

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.fillStyle = 'yellow';
            cans.fillRect(30,30,340,240);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

注: ここでは fillRect() メソッドが使用されています。文字通りの意味から、ここでのパラメーターは説明する価値があります。これは数学の場合と同じです。ここでの X と Y は、キャンバスの左上隅の開始点を基準としています。！

Circle

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            cans.beginPath();
            cans.arc(200,150,100,0,Math.PI*2,false);
            cans.closePath();
            cans.lineWidth = 5;
            cans.strokeStyle = 'red';
            cans.stroke();
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

注: ここでの arc メソッドの使用法は、arc(X,Y,Radius,startAngle,endAngle,反時計回り) です。これは、(円の中心、中心 Y 座標、半径、開始角度 (ラジアン)、終了角度ラジアン、時計回りに描画するかどうか); グラデーション
グラデーションは四角形、円、線を塗りつぶすことができます。テキストなど。さまざまな形状は、それ自体で異なる色を定義できます。

キャンバスのグラデーションを設定するには 2 つの異なる方法があります:
createLinearGradient(x,y,x1,y1) - 線のグラデーションを作成します

createRadialGradient(x,y,r,x1,y1,r1) - パスを作成します方向性/円形グラデーション

グラデーションオブジェクトを使用する場合は、2 つ以上のストップカラーを使用する必要があります。

addColorStop() メソッドはカラーストップを指定し、パラメーターは 0 から 1 までの座標で記述されます。

グラデーションを使用し、fillStyle またはストロークスタイルの値をグラデーションに設定してから、形状を描画します。長方形、テキスト、線など。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style type="text/css">
        canvas{border:dashed 2px #CCC}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var cans = can.getContext('2d');
            var gnt1 = cans.createLinearGradient(10,0,390,0);
            gnt1.addColorStop(0,'red');
            gnt1.addColorStop(0.5,'green');
            gnt1.addColorStop(1,'blue');
            cans.fillStyle = gnt1;
            cans.fillRect(10,10,380,280);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="can" width="400px" height="300px">4</canvas>
    </body>
</html>

Canvas - Text

text: 描画されるテキスト

Context.textAlign: 水平方向の配置

開始、終了、右、中央

context.textBaseline: 垂直方向の配置上、吊り下げ、中央、アルファベット、表意文字、下

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        var cans = can.getContext('2d');
        cans.font = 'bold 144px consolas';
        cans.textAlign = 'left';
        cans.textBaseline = 'top';
        cans.strokeStyle = '#DF5326';
        cans.strokeText('Hello', 100, 100);
        cans.font = 'bold 144px arial';
        cans.fillStyle = 'red';
        cans.fillText('World', 300,300);
    }
    function img_click(){
        var can = $$('can');
        var cans = can.getContext('2d');
        cans.clearRect(0,0,800,600);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>

学び続ける

新しいファイル

<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); cans.moveTo(0,0); cans.lineTo(400,300); var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标 gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色 gnt1.addColorStop(1,'yellow'); cans.lineWidth=3; cans.strokeStyle = gnt1; cans.stroke(); } </script> <body onload="pageLoad();"> <canvas id="can" width="400px" height="300px">4</canvas> </body> </html>

提出するリセットコード

自動運転