Canvas知识点梳理

最新推荐文章于 2024-08-04 16:33:59 发布

「已注销」

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量117

点赞数

分类专栏：学习笔记文章标签： javascript 前端 html 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_41990299/article/details/130723309

版权

学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、前言

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

二、前提条件

2.1 初始化

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

如果浏览器不支持该功能，那么将会显示你在canvas标签中键入的文本内容。 javascript  <canvas id="myCvs" width="400" height="400"> Your browser does not support canvas. </canvas>

2.2 创建绘图环境

在使用canvas元素之前，必须保证要有一个2d的绘图环境。 javascript 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的一个简单例子：画一个绿色矩形。 ```javascript

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>

```

三、基础使用

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

3.1 描边和填充

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

填充，就是用指定的样式(颜色、渐变或图像)填充图像。 ```javascript 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() 填充矩形

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

3.2.2 strokeRect() 描边矩形

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

3.2.3 clearRect() 清除矩形区域

javascript // 清除画布矩形区域 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 案例

画线

javascript // 画线组成矩形 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(); // 描边

画圆弧

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

三角形

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

贝塞尔曲线

javascript // 二次贝塞尔曲线(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()方法，它们是以堆栈(先进后出)的形式保存绘图上下文的设置和变换。

这里看个例子，依次保存然后依次恢复读取设置的颜色。 ```javascript 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()方法配合保存和恢复方法实现颜色渐变。 javascript // 颜色渐变正方形 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()方法配合保存和恢复方法实现形状的变换。 javascript // 旋转正方形 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。

这里综合上述几个方法，绘制一幅海螺图形。 javascript // 海螺图形 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坐标。 javascript 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像素。 javascript context.drawImage(img, 50, 50, 100, 100); // 2. 目标宽高均为100

5.3 区域裁剪绘制图像

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

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

简单来说就是，第2至第5个参数告诉我们图像上怎么截取一部分，第6至第9个参数告诉我们怎么在canvas上画出图像。 javascript 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 实心文字

javascript // 实心文字 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 空心文字

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

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

6.3 文字样式

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

6.4 对齐方式

文本的对齐方式有：start、end、left、right、center javascript // 对齐方式(start end left right center) context.textAlign = 'start'; // 从左往右显示文本 // context.textAlign = 'end'; // 从右往左显示文本

6.5 文字基线

文本的文字基线有：alphabetic、top、bottom、middle、hanging、ideographic javascript // 文本基线(alphabetic top bottom middle hanging ideographic) context.textBaseline = 'middle';

6.6 测量字符串宽度

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

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas知识点梳理

一、前言Canvas是HTML5标准中推出的一个非常受欢迎的功能元素，这个元素负责在页面中设定一个区域，然后就可以JS动态地在这个区域中绘制图形了。并且它还是跨平台动画和游戏的标准方案。二、前提条件2.1 初始化要使用canvas元素必须先设置其width和height属性，指定绘图区域的大小。如果浏览器不支持该功能，那么将会显示你在canvas标签中键入的文本内容。java...
复制链接

扫一扫

专栏目录