canvas 基础入门

Posted 2023-05-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 基础入门相关的知识，希望对你有一定的参考价值。

参考技术A Canvas（画布）是在 html5 中新增的标签用于在网页实时生成图像，可以操作图像内容，是一个可以用 javascript 操作的位图（bitmap）。

游戏：canvas 在基于 Web 的图像显示方面比 Flash 更加立体、更加精巧，canvas 游戏在流畅度和跨平台方面更优秀。

可视化的库：Echart

banner 广告：Canvas 实现动态的广告效果非常合适

图形编辑器：后续 PhotoShop 能够 100%基于 Web 实现

微信读书、腾讯文档均是通过 canvas 实现

在 canvas 中默认坐标系在左上角（X 轴正方向向右、Y 轴正方向向下），可是有的时候需要变换坐标系才能更方便的实现所需的效果，此时需要变换坐标系，canvas 提供了以下几种变换坐标系的方式：

根据坐标系绘制内容

利用 canvas 绘制图形时势必要上点颜料，通过设置 fillStyle 属性即可设置对应的颜料，对于颜料值主要有以下四种：纯颜色、线性渐变颜色、径向渐变颜色、位图。

有的时候需要引入外部图片，然后对外部图片进行像素级别的处理，最后进行保存。

Canvas入门01-基础知识

定义一个canvas，直接在Html中使用canvas便签即可。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9      body {
10          background: #ddd;
11      }
12      #canvas {
13          margin: 10px;
14          padding: 10px;
15          background: #fff;
16          border: thin inset #aaa;
17      }
18     </style>
19 </head>
20 <body>
21     <canvas id="canvas" width="600" height="300">
22         Canvas not supported
23     </canvas>
24     <script src="./example.js"></script>
25 </body>
26 </html>

　　canvas 元素内容部分所含的文本，仅在浏览器不支持canvas 元素的时候，才会显示该内容。这种文本叫做“后备内容”（fallback content）。

使用canvas画图：

1 var canvas = document.getElementById(‘canvas‘);
2 var context = canvas.getContext(‘2d‘);
3 
4 context.font = ‘38pt Arial‘;
5 context.fillStyle = ‘cornflowerblue‘;
6 context.strokeStyle = ‘blue‘;
7 context.fillText(‘Hello Canvas‘, canvas.width/2 - 150, canvas.height/2 + 15);
8 context.strokeText(‘Hello Canvas‘, canvas.width/2 - 150, canvas.height/2 + 15);