【基础知识】HTML5 Canvas的绘图环境CanvasRenderingContext2D的使用（各属性简介）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

目录

 

前言

属性 

 提示：你可以扩充2d绘图环境对象的功能

---

前言

在JavaScript代码中，很少会用到canvas元素本身，canvass元素仅仅是充当绘图环境对象的容器而存在的。这本书只关注2d绘图环境，其他环境如3d的绘图环境也在稳步制定中，先从2d入手，逐渐扩展，加油！

属性 

下面的表格是从书本中摘得的，其中少部分的语句缩写或改写，旨在更容易阅读和理解。

 

CanvassRenderingContext2D对象包含的属性

属性	简介
canvas	指向该绘图环境所属的canvas对象，该属性常见用途就是获取对应canvas的宽高，分别调用context.canvas.width和context.canvas.height即可
fillstyle	指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变色和图案
font	设定在调用绘图环境对象的fillText()或strokeText()方法时，所需要的字型
globalAlpha	全局透明度设定，取0～1之间的值。浏览器会将每个像素的alpha的值与该值相乘
globalCompsiteOperation	决定浏览器将某个物体绘制在其他物体之上时，所采用的绘制方式。
lineCap	该值告诉浏览器如何绘制线段的端点。取值：butt | round | square。默认值是butt
lineWidth	该值决定了canvas之中绘制线段的屏幕像素宽度。它必须是非负、非无穷的double值。默认值是1.0
lineJion	决定两条线段相交时如何绘制焦点。取值： bevel | round | miter。默认值是miter
miterLimit	告诉浏览器如何绘制miter形式的线段焦点
shadowBlur	决定浏览器该如何延伸阴影效果。值越高，阴影延伸越远。该值不是指阴影的像素长度，而是代表高斯模糊方程式中的参数值。它必须是一个非负且非无穷的double值，默认为0
shadowColor	阴影的颜色。通常用半透明色作为该属性的值，以便让后面的背景能够显示出来
shadowOffsetX	以像素为单位，指定阴影效果水平方向偏移量
shadowOffsetY	以像素为单位，指定阴影效果垂直方向偏移量
strokeStyle	指定对路径进行描边时所用的绘制风格。该值可被设定为某个颜色、某个渐变色或者图案
textAlign	决定以fillText()或strokeText()方法进行绘制时，所画文本的水平对齐方式
textBaseline	决定以fillText()或strokeText()方法进行绘制时，所画文本的垂直对齐方式
……	……

 提示：你可以扩充2d绘图环境对象的功能

与每个canvas相关联的绘图环境对象都是一个功能强大的图形引擎、如渐变色、图像合成（image compositing）、动画等等。不过，它也有局限性，比如，绘图环境对象中就不包含绘制虚线（dashed line）的方法。由于JavaScript是一门动态语言，所以你可以向该绘图环境中加入新的方法，或是对已有对方法功能进行扩充。

具体的操作实例，请继续关注博客更新。后续当写到方法扩充的博文时，会将链接贴到此处。

另外：对于上面每个方法如果后续有示例或相关教程，也会以超链接的形式从本文导出。