(精華)2020年6月28日 Canvas 基礎知識

愚公搬程式碼發表於2020-06-28
Canvas

Canvas繪製線條

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>線條</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            // context物件 ， 2d物件，使用它可以來繪製圖案
            var ctx = canvas.getContext('2d');
            // ctx.beginPath(); //1. 生成路徑，新建一條路徑
            // ctx.moveTo(20,20);   //2. moveTo移動筆觸 設定起始點，把筆移動到哪裡去
            //3. 開始畫圖
            //畫線 ， 三角，圓 
            //4. 樣式
            //5.  stroke (描邊)  不能自動閉合路徑，closePath
            // fill（實心的填充） .自動閉合路徑
            //畫一條線
            ctx.beginPath(); //生成路徑
            ctx.moveTo(50, 100);
            ctx.lineTo(80, 200); //定義線條結束的點
            // ctx.lineTo(215,220);//定義線條結束的點
            ctx.closePath(); //關閉路徑， 建立從當前點到開始點的路徑
            ctx.stroke();
        }
    </script>
</body>

</html>

Canvas繪製三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三角形</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            // context物件 ， 2d物件，使用它可以來繪製圖案
            var ctx = canvas.getContext('2d');
            //畫描邊三角形
            //ctx.beginPath();//生成路徑
            //ctx.lineWidth=20;
            //ctx.moveTo(50,100); 
            //ctx.lineTo(80,200);//定義線條結束的點
            //ctx.lineTo(215,220);//定義線條結束的點
            //ctx.lineTo(50,100);//定義線條結束的點
            //ctx.closePath();  //關閉路徑， 建立從當前點到開始點的路徑
            //ctx.stroke();
            //繪製填充的三角形
            ctx.beginPath();
            ctx.moveTo(300, 100);
            ctx.lineTo(120, 130);
            ctx.lineTo(150, 220);
            ctx.strokeStyle = "#ff6600";
            ctx.fillStyle = "#ff6600";
            ctx.closePath();
            ctx.stroke();
            // ctx.fill();  //不需要closePath
        }
    </script>
</body>

</html>

Canvas繪製矩形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>矩形</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            // context物件 ， 2d物件，使用它可以來繪製圖案
            var ctx = canvas.getContext('2d');
            //3種繪製矩形 
            //    1.  fillRect(x,y,width,height) //實心， 填充
            //    2.  strokeRect(x,y,width,height) //描邊的矩形
            //    3. rect路徑， fill
            // clearRect(x,y,width,height)  //清除矩形區域，完全透明
            //1.繪製一個填充的矩形
            ctx.beginPath(); //
            ctx.fillStyle = '#ff6600';
            ctx.fillRect(250, 250, 80, 100);
            //2.繪製一個描邊的矩形
            ctx.beginPath(); //
            ctx.strokeStyle = 'green';
            ctx.strokeRect(320, 120, 120, 100);
            //3. 繪製填充的矩形帶有邊框
            ctx.translate(10, 10); //左邊參考點
            ctx.lineWidth = 5;
            ctx.fillStyle = '#ff6600';
            ctx.strokeStyle = 'green';
            //定義繪製的路徑
            ctx.rect(0, 0, 80, 100); //只是一條路徑，並沒描邊和填充
            ctx.stroke();
            ctx.fill();
            //4.清除指定區域，讓他完全透明
            ctx.clearRect(10, 10, 50, 60);
        }
    </script>
</body>

</html>

Canvas繪製圓弧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圓弧</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            // context物件 ， 2d物件，使用它可以來繪製圖案
            var ctx = canvas.getContext('2d');
            // 360 * Math.PI/180   
            // arc(x,y,radius,start,end,方向（true,false）// 繪製
            // false 順時針
            // true :逆時針
            //繪製一個實心的圓
            ctx.beginPath();
            ctx.fillStyle = '#ff6600';
            ctx.arc(70, 70, 60, 0, 2 * Math.PI, true); //
            ctx.fill();
            //繪製一個描邊的圓
            ctx.translate(200, 200);
            ctx.beginPath();
            ctx.strokeStyle = '#ff6600';
            ctx.arc(70, 70, 60, 0, 2 * Math.PI, true); //
            ctx.stroke();
            //繪製一個描邊的圓弧
            ctx.translate(100, 100);
            ctx.beginPath();
            ctx.strokeStyle = '#ff6600';
            ctx.arc(70, 70, 60, 0, 60 * Math.PI / 180, false); //
            ctx.stroke();
        }
    </script>
</body>

</html>

Canvas繪製圖片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圖片</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            // context物件 ， 2d物件，使用它可以來繪製圖案
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.src = './heads.png';
            img.width = '30px';
            img.heihgt = '300px';
            img.onload = function () {
                //開始繪製圖片
                ctx.drawImage(img, 10, 10);
            }
            // img.οnerrοr=function(){
            // }
        }
    </script>
</body>

</html>

Canvas繪製文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            // context物件 ， 2d物件，使用它可以來繪製圖案
            var ctx = canvas.getContext('2d');
            //font  textAlign  textBaseline  direction ( ltr  rtl )
            //渲染文字
            // fillText(text, x,y, maxWidth)
            // strokeText(text, x,y, maxWidth)
            ctx.font = '30px Arial';
            ctx.fillText('hello world', 10, 50, 200);
            ctx.strokeText('hello world', 10, 350, 200);
        }
    </script>
</body>

</html>

相關文章