高薪前端必备，后端工程师带你学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：动画

结语

您的项目需求