2.2 canvas的绘图环境
canvas仅仅只是一个绘图的容器，其内存在一个绘图环境，该环境对象提供了全部的绘图功能。
目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的绘图环境，例如，3d绘图——WebGL。
2d绘图环境
调用2d绘图环境的代码，
canvas.getContext("2d");
2d绘图环境的属性
| 属性 | 简介 |
| canvas | 指向该绘图环境所属的canvas对象。该属性常见的用途就是获取canvas的宽度和高度，分别调用context.canvas.width与context.canvas.height。 |
| fillstyle | 指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变色或图案 |
| font | 设定在调用绘图环境对象的fillText()或strokeText()方法时所使用的字体 |
| globalAlpha | 全局透明度设定，它可以取0(完全透明)~1.0(完全不透明)之间的值。浏览器会将每个像素的Alpha值与该值相乘，在绘制图像时也是如此。 |
| globalCompsiteOperation | 该值决定了浏览器将某个物体绘制在其他物体之上时，所采用的绘制方式。 |
| lineCap | 该值告诉浏览器如何绘制线段的端点。可以指定以下3个值中的任意一个：butt、round、square。默认为butt |
| lineWidth | 该值决定了在canvas中绘制的线段的屏幕像素宽度。它必须是一个非负、非无穷的double值。默认为1.0 |
| lineJoin | 告诉浏览器在两条线段相交时如何绘制焦点。可取值：bevel、round、miter(默认值)。 |
| miterLimit | 告诉浏览器如何绘制miter形式的线段焦点 |
| shadowBlur | 该值决定了浏览器该如何延伸阴影效果。值越高，阴影效果延伸的越远。该值不是指阴影的像素长度，而是代表高斯模糊(Gaussian blur)方程式中的参数值。它必须是一个非负非无穷量的double值，默认为0 |
| shadowColor | 该值告诉浏览器使用何种颜色绘制阴影。通常使用半透明色作为该属性的值，以便让后面的背景能显示出来 |
| shadowOffsetX | 以像素为单位，指定阴影效果的水平方向偏移量 |
| shadowOffsetY | 以像素为单位，指定阴影效果的垂直方向偏移量 |
| strokeStyle | 指定了对路径进行扫描所用的绘图风格。该值可被设定为某个颜色、渐变色或图案 |
| textAlign | 决定了以fillText()或strokeText()方法进行绘制时，所画文本的水平对齐方式 |
| textBaseline | 决定了以fillText()或strokeText()方法进行绘制时，所画文本的垂直对齐方式 |
3d绘图环境——WebGL
它是一种3D绘图标准，这种标准允许把JavaScript和OpenGL ES 2.0结合在一起，让WebGL可以为HTML5 canvas提供硬件3D加速渲染，开发人员可以借助系统显卡在浏览器里更加流畅地展示3D场景和模型，还可以创建复杂的导航和数据视觉化。
由于还是一菜鸟，还没学到WebGL，所以在此就不详述了。
时间： 2024-08-24 05:22:58