canvas教学RenderingContext2D对象的属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas教学RenderingContext2D对象的属性相关的知识,希望对你有一定的参考价值。

即2D绘图环境的属性

canvas

指向绘图环境的canvas对象,通过它来调用canvas的宽度和高度,调用context.canvas.width和context.canvas.height

fillstyle

指定该绘图环境在图形操作中所使用的颜色渐变色和图案

font

在调用绘图环境对象的fillText()或strokeText()所使用的字型

globalAlpha

全局透明度,取0到1的值

globalCompsiteOperation

将某个物体绘制于某个物体之上

lineCap

绘制线段的端点,取值为butt,round ,square

lineWidth

绘制线段的屏幕像素宽度,非负非无穷的值,默认1

lineJoin

绘制两条线段相交的焦点,取值bevel,round,miter,默认miter

miterLimit

告诉浏览器如何绘制miter形式的线段焦点

shadowBlur

告诉浏览器如何延伸阴影效果,非负非无穷,默认0

shadowColor

阴影的颜色

shadowOffset X

以像素为单位,指定了阴影效果的水平偏移量

shadowOffset Y

以像素为单位,指定了阴影效果的竖直偏移量

strokeStyle

进行描边的绘制风格

textAlign

决定以fillText()或strokeText()进行绘制,文本的水平对齐方式

textBaseline

决定以fillText()或strokeText()进行绘制,文本的竖直对齐方式

 

以上是关于canvas教学RenderingContext2D对象的属性的主要内容,如果未能解决你的问题,请参考以下文章

案例 HTML5 Canvas流动线条动画特效

vue3+ts+canvas项目中图片进行矩形批注

公开赛第3期 | 网页中的美术世界-CANVAS动画实战

手把手教你玩转Canvas

案例如何用html5 制作canvas酷炫的网状图形动画特效

思考如何开发虚拟仿真实验教学项目