Canvas入门01-基础知识

Posted 2021-01-16 liulei-cherry

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);