高薪前端必備，后端工程師帶你學canvas，第一節：圖片上繪制字體

anvas畫板

html

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
 <style>
 body {
 background: skyblue;
 }
 #canvas {
 margin: 10px;
 padding: 10px;
 background: white;
 border: thin inset gray;
 }
 </style>
 </head>
 <body>
 <canvas id='canvas' width='600' height='300'>
 Canvas not supported
 </canvas>
 <script src='example.js'></script>
 </body>
</html>

js

實心字

var canvas = document.getElementById('canvas'),
 context = canvas.getContext('2d');
//設置字體
context.font = '38px Arial'; 
//字體填充顏色
context.fillStyle = 'red';
//字體輪廓的顏色
context.strokeStyle = 'blue'; 
//實心字
context.fillText("程序員的365", canvas.width/2 - 150,canvas.height/2 + 15);
//空心字
context.strokeText("程序員的365", canvas.width/2 - 150,canvas.height/2 + 15 );

空心字

技術總結

選擇字體

根據繪制實心字還是空心字選擇填充顏色或描邊顏色

填充字體或對字體進行描邊

實心空心結合

最后

歡迎大家關注我的頭條號，持續更新，非常感謝！

TML5 Canvas API 是一個強大的圖形系統，它允許開發者在網頁上繪制2D圖形。自從 HTML5 標準推出以來，Canvas API 已經成為了網頁游戲開發、數據可視化、圖像處理等領域的關鍵技術。在本文中，我將介紹 Canvas API 的基礎知識，并通過幾個實例演示如何使用 Canvas API 來創建簡單的圖形和動畫。

什么是 Canvas API？

Canvas API 提供了一個通過 JavaScript 和 HTML <canvas> 元素來繪制圖形的方式。它可以用來繪制簡單的直線、圓形、復雜的圖形，甚至可以用來制作動畫。Canvas API 是基于像素的，這意味著一旦圖形被繪制，它就變成了畫布上的像素集合。

Canvas 基礎

在開始使用 Canvas 繪圖之前，你需要在 HTML 文檔中添加 <canvas> 標簽，并通過 JavaScript 獲取該元素的引用和繪圖上下文。下面是基本的設置步驟：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas 基礎示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        canvas {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加陰影效果 */
            background-color: #fff; /* 設置畫布背景色 */
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;">
        您的瀏覽器不支持Canvas。
    </canvas>

    <script>
        // 獲取 canvas 元素
        var canvas = document.getElementById('myCanvas');
        // 獲取繪圖上下文
        var ctx = canvas.getContext('2d');
        
        // 繪制藍色矩形
        ctx.fillStyle = 'blue'; // 設置填充顏色為藍色
        ctx.fillRect(10, 10, 150, 100); // 繪制矩形

        // 繪制紅色圓形
        ctx.beginPath(); // 開始路徑繪制
        ctx.arc(300, 150, 50, 0, Math.PI * 2, true); // 繪制圓形
        ctx.fillStyle = 'red'; // 設置填充顏色為紅色
        ctx.fill(); // 填充圓形

        // 繪制黑色邊框的文字
        ctx.font = '20px Arial'; // 設置字體
        ctx.fillStyle = 'black'; // 設置填充顏色為黑色
        ctx.fillText('Hello Canvas', 120, 250); // 繪制文字
    </script>
</body>
</html>

在這個示例中，我們首先通過CSS將頁面背景設置為淺灰色，并將Canvas居中顯示，為Canvas添加了陰影效果，使其在頁面上更加突出。

接著，通過JavaScript在Canvas上繪制了一個藍色的矩形、一個紅色的圓形，以及帶有黑色邊框的文字“Hello Canvas”，以展示Canvas的基本繪圖功能。

示例 1：繪制簡單的矩形

Canvas API 的基礎是能夠繪制簡單的形狀，比如矩形。下面的示例展示了如何繪制一個填充的矩形和一個矩形輪廓。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>繪制矩形示例</title>
</head>
<body>
    <canvas id="rectangleCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

    <script>
        var canvas = document.getElementById('rectangleCanvas');
        var ctx = canvas.getContext('2d');

        // 繪制填充矩形
        ctx.fillStyle = 'blue'; // 設置填充顏色
        ctx.fillRect(50, 50, 150, 100); // 填充矩形

        // 繪制矩形輪廓
        ctx.strokeStyle = 'red'; // 設置輪廓顏色
        ctx.strokeRect(250, 50, 150, 100); // 繪制矩形輪廓
    </script>
</body>
</html>

在這個示例中，我們使用了 fillRect 方法來繪制一個藍色填充的矩形，使用了 strokeRect 方法來繪制一個紅色輪廓的矩形。

示例 2：繪制路徑和形狀

Canvas API 允許你創建復雜的路徑和形狀。下面的示例展示了如何繪制一個路徑，這個路徑組成了一個三角形。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>繪制路徑和形狀示例</title>
</head>
<body>
    <canvas id="pathCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

    <script>
        var canvas = document.getElementById('pathCanvas');
        var ctx = canvas.getContext('2d');

        // 開始路徑
        ctx.beginPath();
        // 移動到起點
        ctx.moveTo(100, 100);
        // 繪制線條
        ctx.lineTo(200, 100);
        ctx.lineTo(150, 200);
        // 關閉路徑形成三角形
        ctx.closePath();
        
        // 繪制路徑
        ctx.fillStyle = 'green';
        ctx.fill();
        ctx.strokeStyle = 'black';
        ctx.stroke();
    </script>
</body>
</html>

在這個示例中，我們使用了 beginPath 方法開始一個新路徑，使用 moveTo 和 lineTo 方法定義路徑，然后使用 closePath 方法關閉路徑。最后，我們使用 fill 方法填充路徑，并使用 stroke 方法繪制路徑的輪廓。

示例 3：動畫

Canvas API 也可以用來創建動畫。下面的示例展示了如何創建一個簡單的動畫，其中一個藍色的球在畫布上移動。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas 動畫示例</title>
</head>
<body>
    <canvas id="animationCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>

    <script>
        var canvas = document.getElementById('animationCanvas');
        var ctx = canvas.getContext('2d');

        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 20;
        var dx = 2;
        var dy = -2;

        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI*2);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.closePath();
        }

        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            if(x + dx > canvas.width-radius || x + dx < radius) {
                dx = -dx;
            }
            if(y + dy > canvas.height-radius || y + dy < radius) {
                dy = -dy;
            }
            x += dx;
            y += dy;
            requestAnimationFrame(update);
        }

        update();
    </script>
</body>
</html>

在這個示例中，我們定義了一個 drawBall 函數來繪制球，然后在 update 函數中移動球的位置并反復調用 requestAnimationFrame(update) 來創建動畫效果。

結語

Canvas API 是一個功能強大的工具，它為前端開發者提供了廣泛的圖形繪制能力。通過上述示例，我們可以看到，Canvas API 不僅可以用來繪制靜態圖形，還可以創建動態的、交互式的應用。隨著技術的不斷發展，Canvas API 的應用場景將會越來越廣泛，作為一名前端工程師，掌握 Canvas API 將是一個非常有價值的技能。

lt;canvas> 標簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。

比如在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。

什么是 canvas?

HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.

<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。

你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。

iphone

創建一個畫布（Canvas）

一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制。

注意: 默認情況下 <canvas> 元素沒有邊框和內容。

<canvas>簡單實例如下:

注意: 標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小。

提示:你可以在HTML頁面中使用多個 <canvas> 元素.

1.使用 style 屬性來添加邊框:

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

2.使用 JavaScript 來繪制圖像

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

實例解析:

3.首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

4.然后，創建 context 對象：

var ctx=c.getContext("2d");

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪制一個紅色的矩形：

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

iphone

Canvas 坐標

canvas 是一個二維網格。

canvas 的左上角坐標為 (0,0)

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。

坐標實例

如下圖所示，畫布的 X 和 Y 坐標用于在畫布上對繪畫進行定位。鼠標移動的矩形框上，顯示定位坐標。

Canvas - 路徑

在Canvas上畫線，我們將使用以下兩種方法：

moveTo(x,y) 定義線條開始坐標

lineTo(x,y) 定義線條結束坐標

繪制線條我們必須使用到 "ink" 的方法，就像stroke().

定義開始坐標(0,0), 和結束坐標 (200,100)。然后使用 stroke() 方法來繪制線條:

Canvas - 文本

使用 canvas 繪制文本，重要的屬性和方法如下：

font - 定義字體

fillText(text,x,y) - 在 canvas 上繪制實心的文本

strokeText(text,x,y) - 在 canvas 上繪制空心的文本

使用 fillText():

使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（實心）：

JavaScript:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

大家有沒有學會呢？沒學會的話記得私信小編"011"哦~

在線咨詢

上一篇：2021年第三屆北京國際公益廣告大會創意征集大賽參賽指南
下一篇：H5 視頻兼容性處理總結

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

高薪前端必備，后端工程師帶你學canvas，第一節：圖片上繪制字體

html

js

技術總結

最后

什么是 Canvas API？

Canvas 基礎

示例 1：繪制簡單的矩形

示例 2：繪制路徑和形狀

示例 3：動畫

結語

您的項目需求