canvas坐標體系+canvas畫直線、矩形、圓

本文轉載自查看原文 2020-03-10 23:52 862 html / html5 / h5

canvas默認寬高是300*150px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas">您的瀏覽器不支持canvas</canvas>
</body>
</html>

操作canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);
        ctx.lineTo(100,100);
        ctx.stroke();
    </script>
</body>
</html>

修改canvas尺寸

<canvas class="canvas" id="canvas" width="100" height="100">您的瀏覽器不支持canvas</canvas>

此處有坑：

如果不直接在canvas上定義寬高，而是在css中定義

<canvas class="canvas" id="canvas">您的瀏覽器不支持canvas</canvas>

.canvas{border:1px solid pink;width:100px;height:100px;}

可以看到跟剛才的效果是不一樣的！！！

打印canvas的寬高可以發現，依然是300*150，也就是說在css里設置的寬高並不是canvas的實際寬高

console.log(canvas.width+","+canvas.height);

具體操作過程就是：現在300*150的畫布上進行繪圖，等繪制完成后再按照100*100的比例進行縮放

因此，想要設置canvas的寬高，只能在html上直接寫，或者在js里定義

canvas.width=100;
        canvas.height=100;
        console.log(canvas.width+","+canvas.height);

以下是通過兩種方式設置的樣式的對比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;width:200px;height:200px;}
        .canvas2{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas">您的瀏覽器不支持canvas</canvas>
    <canvas class="canvas2" id="canvas2">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境
        canvas.width=100;
        canvas.height=100;
        console.log(canvas.width+","+canvas.height);
        ctx.moveTo(0,0);
        ctx.lineTo(100,100);
        ctx.stroke();

        var canvas2=document.getElementById("canvas2");
        var ctx2=canvas2.getContext("2d");//上下文，繪圖環境
        canvas2.width=200;
        canvas2.height=200;
        console.log(canvas2.width+","+canvas2.height);
        ctx2.moveTo(0,0);
        ctx2.lineTo(200,200);
        ctx2.stroke();
    </script>
</body>
</html>

canvas畫直線

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制
        ctx.stroke();//真正繪制
    </script>
</body>
</html>

以下又有新坑：

如果此時想要復制一條線，使用以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制
        ctx.stroke();//繪制內存中存儲的第一段線條

        ctx.moveTo(100,0);//起點
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);//在內存中繪制
        ctx.stroke();//繪制內存中存儲的第一段和第二段線條
    </script>
</body>
</html>

肉眼可見第一條線顏色比第二條線深

其實是因為第一條線被繪制了兩次

所以正確的打開方式應該是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制

        ctx.moveTo(100,0);//起點
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);//在內存中繪制
        ctx.stroke();//繪制內存中存儲的第一段和第二段線條
    </script>
</body>
</html>

一個stroke即可

如果堅持要分兩次單獨繪制的話，就需要以下方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制
        ctx.stroke();//繪制內存中存儲的第一段線條

        ctx.beginPath();//會把之前內存中的線條清空
        ctx.moveTo(100,0);//起點
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);//在內存中繪制
        ctx.stroke();//繪制內存中存儲的第二段線條
    </script>
</body>
</html>

canvas畫圓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        //.arc繪制()圓弧
        //第一個參數是圓心位置，第二個參數是半徑
        //第三和四參數分別代表起始弧度和終止弧度，完整的圓就是0-2π
        //最后一個參數，true代表逆時針，false代表順時針
        ctx.arc(100,100,50,0,2*Math.PI,true);
        ctx.strokeStyle="#abcdef";//設置繪制顏色
        ctx.stroke();
    </script>
</body>
</html>

繪制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        //.strokeRect繪制矩形
        //第一個參數是矩形左上角位置 300,100
        //第二個參數是矩形的寬高 200,100
        ctx.strokeRect(300,100,200,100);
    </script>
</body>
</html>

strokeRect是封裝好的，因此不需要再次stroke即可繪制

閉合路徑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制
        ctx.closePath();//自動閉合路徑
        ctx.stroke();//繪制
        
    </script>
</body>
</html>

填充與描邊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制
        ctx.closePath();//自動閉合路徑
        ctx.fill();//填充區域
        
    </script>
</body>
</html>

fill同時也能閉合路徑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制
        ctx.closePath();//自動閉合路徑

        ctx.lineWidth=5;//設置線條粗細
        ctx.strokeStyle="orange";//描邊顏色
        ctx.stroke();

        ctx.fillStyle="#abcdef";//填充顏色
        ctx.fill();//填充
        
    </script>
</body>
</html>

當使用半透明的填充色時，可以看到填充是沿着路徑開始的，因此會有一半的線條寬度與填充色重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.moveTo(0,0);//起點
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在內存中繪制
        ctx.closePath();//自動閉合路徑

        ctx.lineWidth=10;//設置線條粗細
        ctx.strokeStyle="orange";//描邊顏色
        ctx.stroke();

        ctx.fillStyle="rgba(171,205,239,.5)";//填充顏色
        ctx.fill();//填充
        
    </script>
</body>
</html>

矩形的填充和描邊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.lineWidth=10;//設置線條粗細
        ctx.strokeStyle="orange";//描邊顏色
        ctx.fillStyle="rgba(171,205,239,.5)";//填充顏色

        ctx.strokeRect(100,200,100,100);//描邊的矩形
        ctx.fillRect(300,200,100,100);//填充的矩形
    
    </script>
</body>
</html>

圓的填充和描邊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，繪圖環境

        ctx.lineWidth=10;//設置線條粗細
        ctx.strokeStyle="orange";//描邊顏色
        ctx.fillStyle="rgba(171,205,239,.5)";//填充顏色

        ctx.arc(100,200,50,0,2*Math.PI,true);
        ctx.stroke();
        ctx.fill();
    
    </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android利用canvas畫各種圖形(點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) . Android利用canvas畫各種圖形(點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) canvas學習-----畫直線 html5 canvas 畫直線 html5使用canvas畫空心圓與實心圓畫正圓角矩形 - HTML5 Canvas 作圖 canvas 圖片圓圓角圓 canvas(二)直線樣式和虛線 html5 canvas從圓開始 canvas教程(二) 繪制直線