标签：fill 影响 上下文 getc pad corn aaa col 上下
定义一个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);
显示效果如下：
canvas 元素实际上有两套尺寸。一个是元素本身的大小，还有一个是元素绘图表面（drawing surface）的大小。
当设置元素的 width 和 height 属性时，实际上是同时修改了元素本身的大小和元素绘图表面的大小。如果是通过CSS 设置，只会改变元素本身的大小，而不会影响绘图表面，还是默认的 300 * 150 px，这会影响坐标轴的计算。
小结：
（1）使用 document.getElementById() 来获取指向 canvas的引用
（2）在 canvas 对象上调用 getContext(‘2d‘) 来获取绘图上下文（也叫绘图环境变量），d 必须小写
（3）使用 context 对象在 canvas 元素上进行绘制。
（4）在canvas 元素上设置 width 和 height 属性来设置 canvas 的 size，默认的 canvas 元素大小是 300*150 px
标签：fill 影响 上下文 getc pad corn aaa col 上下
原文地址：https://www.cnblogs.com/liulei-cherry/p/9872283.html
