Canvas知识点梳理

一、前言

Canvas是HTML5标准中推出的一个非常受欢迎的功能元素，这个元素负责在页面中设定一个区域，然后就可以JS动态地在这个区域中绘制图形了。并且它还是跨平台动画和游戏的标准方案。

二、前提条件

2.1 初始化

要使用canvas元素必须先设置其width和height属性，指定绘图区域的大小。

如果浏览器不支持该功能，那么将会显示你在canvas标签中键入的文本内容。

<!-- 宽度为400，高度为400的canvas -->
<canvas id="myCvs" width="400" height="400">
    Your browser does not support canvas.
</canvas>

2.2 创建绘图环境

在使用canvas元素之前，必须保证要有一个2d的绘图环境。

if(myCvs.getContext) {
    var context = myCvs.getContext('2d');
}else {
    console.log('Your browser does not support canvas.');
}

使用2d绘图环境提供的方法，可以绘制简单的2d图形，比如矩形、弧线和路径。

它的坐标原点(0, 0)在canvas元素的左上角。

2.3 案例

在学习2d绘图方法之前，我们试着看一下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>Canvas</title>
<style>
    canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
    <!-- 宽度为400，高度为400的canvas -->
    <canvas id="myCvs" width="400" height="400">
        Your browser does not support canvas.
    </canvas>

    <script>
        var myCvs = document.getElementById('myCvs');

        // 检测是否支持2d上下文
        if(myCvs.getContext) {
            var context = myCvs.getContext('2d');
        }else {
            console.log('Your browser does not support canvas.');
        }
        function load() {
            context.fillStyle = '#0f0'; // 填充颜色为绿色
            context.fillRect(50,25,300,150); // 填充矩形 (起点x坐标， 起点y坐标， 宽度， 高度)
        }
        window.onload = function() {
            load();
        }
    </script>
</body>
</html>

三、基础使用

canvas在2d上下文环境中提供了一些可供画图的属性和方法，接下来具体看一下。

3.1 描边和填充

描边，就是只在图形的边缘画线；

填充，就是用指定的样式（颜色、渐变或图像）填充图像。

var myCvs = document.getElementById('myCvs');
if(myCvs.getContext) {
    var context = myCvs.getContext('2d');

    context.strokeStyle = 'red'; // 描边
    context.fillStyle = 'green'; // 填充
}

3.2 绘制矩形

矩形是唯一一种可以直接在2d上下文中绘制的形状。

与矩形有关的方法包括fillRect()、strokeRect()和clearRect()。

它们接收4个参数：矩形的x坐标，矩形的y坐标，矩形宽度和矩形高度。单位都是像素。

3.2.1 fillRect() 填充矩形

// 绘制红色矩形
context.fillStyle = 'red'; // 指定填充颜色为红色
context.fillRect(10,10,50,50); // 指定填充矩形的4个参数

3.2.2 strokeRect() 描边矩形

// 绘制绿色描边矩形
context.strokeStyle = 'green'; // 指定描边颜色
context.strokeRect(70,10,50,50); // 指定描边矩形的4个参数

3.2.3 clearRect() 清除矩形区域

// 清除画布矩形区域
context.clearRect(0,0,400,400);

3.3 绘制路径

通过路径可以创造出复杂的形状和线条。

3.3.1 路径方法

  • arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x, y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（弧度）分别为 startAngle和endAngle，最后一个参数counterclockwise表示绘制方向是否按照逆时针方向计算，值false表示按顺时针方向计算。
  • arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定半径radius穿过(x1,y1)。
  • bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
  • lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
  • moveTo(x, y)：将绘图画笔移动到(x, y)，不画图。一般后面就接lineTo()方法。
  • quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x, y)为止，并且以(cx, cy)作为控制点。
  • rect(x, y, width, height)：从点(x, y)开始绘制一个矩形，宽度和高度分别由width和height指定。注意这里画的是矩形路径而不是独立形状。

3.3.2 绘制流程

在绘制路径之前，必须调用beginPath()方法，表示要开始绘制新的路径了。

在创建了新的路径之后，如果想要绘制一条连接到路径起点的线条，那么就调用closePath()方法；

如果路径已经完成，想要填充它那么就调用fill()方法，想要描边就调用stroke()方法。

3.3.3 案例

画线

// 画线组成矩形
context.beginPath(); // 指定新路径
context.moveTo(10,70); // 画笔移动至(10,70)
context.lineTo(10,120); // 第一点坐标
context.lineTo(60,120); // 第二点坐标
context.lineTo(60,70); // 第三点坐标
context.closePath(); // 闭合路径
context.strokeStyle = 'blue'; // 指定描边颜色
context.stroke(); // 描边

画圆弧

// 画圆弧
context.beginPath();
context.arc(95,95,25,0,2*Math.PI,true); // 圆心(95,95) 起始角度0弧度 结束角度2PI弧度 逆时针方向计算
context.closePath();
context.stroke();

三角形

// 三角形
context.beginPath();
context.moveTo(150, 70); // 第一点坐标
context.lineTo(125, 120); // 第二点坐标
context.lineTo(175, 120); // 第三点坐标
context.closePath();
context.fillStyle = 'yellow' // 指定填充颜色
context.fill(); // 填充

贝塞尔曲线

// 二次贝塞尔曲线（1个控制点）
context.beginPath();
context.moveTo(10, 155); // 画笔移动到(10,155)
context.quadraticCurveTo(60, 200, 300, 155); // 控制点坐标(60,200) 结束点坐标(300,155)
context.stroke();
// 三次贝塞尔曲线（2个控制点）
context.beginPath();
context.moveTo(10, 355); // 画笔移动到(10,355)
context.bezierCurveTo(90, 200, 150, 300, 350, 350); // 控制点坐标(90,200)和(150,300) 结束点坐标(350,350)
context.strokeStyle = 'green';
context.stroke();

案例结果如图所示：

四、Canvas的图形变换

在Canvas的2d上下文中还支持各种基本的绘制变换。

这里介绍平移、旋转、缩放三种变换在Canvas中的实现。

4.1 保存与恢复

在了解各种变换之前，我们先想一个这样的问题：在用canvas画图时，如果我们频繁使用几个默认值的设定，是否可以重置为默认值而不必重复定义呢？

这时就要用到2d上下文提供的保存和恢复的方法了，即save()和restore()方法，它们是以堆栈**（先进后出）的形式保存绘图上下文的设置和变换**。

这里看个例子，依次保存然后依次恢复读取设置的颜色。

var myCvs = document.getElementById('myCvs');
var ctx = myCvs.getContext('2d');

ctx.strokeStyle = '#f00';
ctx.save(); // 保存指定颜色-红色

ctx.strokeStyle = '#0f0';
ctx.save(); // 保存指定颜色-绿色

ctx.strokeStyle = '#00f';
ctx.save(); // 保存指定颜色-蓝色

ctx.restore(); // 恢复指定颜色-蓝色
ctx.strokeRect(10, 10, 50, 50);

ctx.restore(); // 恢复指定颜色-绿色
ctx.strokeRect(70, 10, 50, 50);

ctx.restore(); // 恢复指定颜色-红色
ctx.strokeRect(130, 10, 50, 50);

4.2 平移

translate(x, y)：将坐标原点移动到(x, y)。

这里用translate()方法配合保存和恢复方法实现颜色渐变。

// 颜色渐变正方形
ctx.translate(10, 80);
for(var i = 1; i < 9; i++) {
    ctx.save(); // 保存上一步（平移原点）的操作
    ctx.translate(30*i, 0); // 将原点沿着x方向平移30*i的距离 到达新的坐标原点(30*i, 0)
    ctx.fillStyle = "rgb(" + (30*i) + "," + (255-30*i) + ",255)"; // 指定颜色
    ctx.fillRect(0,0,30,30); // 在(30*i, 0)处按照指定颜色填充矩形
    ctx.restore(); // 读取上一次保存的操作 重新回到(10, 80)
}

4.3 旋转

rotate(angle)：围绕原点旋转图像的angle弧度。

这里利用rotate()方法配合保存和恢复方法实现形状的变换。

// 旋转正方形
ctx.translate(180, 140); // 将原点平移到(180,140)
for(var i = 1; i < 9; i++) {
    ctx.save(); // 保存上一步（平移原点）的操作
    ctx.rotate(Math.PI * (1/2 + i/4)); // 每次循环将图形绕着原点旋转PI/4弧度 总共旋转8次
    ctx.translate(0, -50); // 旋转完成后，将原点移动到(0, -50)
    ctx.fillStyle = "rgb(" + (30 * i) + "," + (255 - 30*i) + ",255)"; // 指定颜色
    ctx.fillRect(-30, -30, 30, 30); // 在(0, -50)处按照指定颜色填充矩形
    ctx.restore(); // 读取上一次保存的操作 重新回到(180, 140)
}

4.4 缩放

scale(scaleX, scaleY)：缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。默认值为1。

这里综合上述几个方法，绘制一幅海螺图形。

// 海螺图形
ctx.translate(200, 80);
for(var i = 1; i < 80; i++) {
    ctx.translate(30, 30);
    ctx.scale(0.95, 0.95); // 设置缩放比例
    ctx.rotate(Math.PI/12);
    ctx.beginPath();
    ctx.fillStyle = '#f00';
    ctx.globalAlpha = '0.3'; // 设置图形透明度
    ctx.arc(0,0,50,0,Math.PI*2,true);
    ctx.fill();
}

五、Canvas的绘制图像

文本和图形是如影随形的，2d绘图上下文提供了绘制图像和文本的方法。

这里介绍一下绘制图像的基本操作。

2d绘图上下文内置了对图像的支持，提供了drawImage()方法，它有三种不同的参数组合。

接下来，依次看看不同的参数组合。

5.1 正常绘制图像

最简单的参数组合是：传入一个HTML图像元素，以及绘制该图像的起点的x和y坐标。

let myCvs = document.getElementById('myCvs');
let context = myCvs.getContext('2d');
let img = new Image();
img.src = './img/canvas.png'; // 我爱前端的一张图片
img.onload = () => {
    context.drawImage(img, 50, 50); // 1. 正常绘制
}

5.2 压缩、拉伸绘制图像

除了上面传的参数（要绘制的图像、源图像x坐标、源图像y坐标），还可以再传两个参数，分别表示目标宽度和目标高度。

这里绘制的图像大小为100x100像素。

context.drawImage(img, 50, 50, 100, 100); // 2. 目标宽高均为100

5.3 区域裁剪绘制图像

除了上述两种方式，还可以选择把图像中的某个区域绘制到上下文中。

这时候要传入9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。

简单来说就是，第2至第5个参数告诉我们图像上怎么截取一部分，第6至第9个参数告诉我们怎么在canvas上画出图像。

context.drawImage(img, 50, 50, 200, 200, 150, 100, 100, 300); // 3. 截取源图像的(50,50)处200x200像素的区域范围内的图像，并把图像在canvas上的(150,100)处以100x300像素的方式绘制出来。

六、Canvas的绘制文本

除了绘制图像，2d上下文还提供了绘制文本的方法。

绘制文本主要有两个方法：fillText()和strokeText()

这两个方法都接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。

6.1 实心文字

// 实心文字
let myCvs = document.getElementById('myCvs');
let context = myCvs.getContext('2d');
let text = '我爱前端FrontEnd1314！'; // 定义一个字符串作为文本
context.fillStyle = '#f00'; // 指定填充颜色
context.fillText(text, 30, 60); // 指定文本字符串及x坐标y坐标

6.2 空心文字

// 空心文字
context.strokeStyle = '#0f0'; // 指定描边颜色
context.strokeText(text, 30, 120); // 指定文本字符串及x坐标y坐标

另外，绘制文本还有若干文本属性可以设置。

6.3 文字样式

// 字体样式
context.font = 'bold 30px 黑体';

6.4 对齐方式

文本的对齐方式有：start、end、left、right、center 

// 对齐方式（start end left right center）
context.textAlign = 'start'; // 从左往右显示文本
// context.textAlign = 'end'; // 从右往左显示文本

6.5 文字基线

文本的文字基线有：alphabetic、top、bottom、middle、hanging、ideographic 

// 文本基线（alphabetic top bottom middle hanging ideographic）
context.textBaseline = 'middle';

6.6 测量字符串宽度

// 测量字符串宽度
let width = context.measureText(text).width/2; // 获取到文本字符串宽度的一半
context.strokeText(text, 30, 200);
context.strokeStyle = '#00f';
context.strokeText(text, 30-width, 200); // 检验可得 就是一半的长度

posted @   见嘉于世  阅读(0)  评论(0)  编辑  收藏  举报  
相关博文：
·  CSS3动画属性之Transform
·  CSS3动画属性之Animation
·  Canvas学习与使用 （H5新增标签）
·  Canvas学习与使用
·  canvas 知识点
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae