我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
目录
前言
在JavaScript代码中,很少会用到canvas元素本身,canvass元素仅仅是充当绘图环境对象的容器而存在的。这本书只关注2d绘图环境,其他环境如3d的绘图环境也在稳步制定中,先从2d入手,逐渐扩展,加油!
属性
下面的表格是从书本中摘得的,其中少部分的语句缩写或改写,旨在更容易阅读和理解。
属性 | 简介 |
---|---|
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是一门动态语言,所以你可以向该绘图环境中加入新的方法,或是对已有对方法功能进行扩充。
具体的操作实例,请继续关注博客更新。后续当写到方法扩充的博文时,会将链接贴到此处。
另外:对于上面每个方法如果后续有示例或相关教程,也会以超链接的形式从本文导出。