javascript程序中的canvas方法有哪些?

发布网友发布时间：2024-10-04 11:33

共1个回答

热心网友时间：2024-11-23 20:41

HTML5新增的canvas标签用于在网页中创建画布，实现图像绘制。

canvas默认为行内块元素，初始大小为300 * 150，无边框，背景色透明。

调整canvas大小有两种方式：css样式和标签属性。css调整方案不推荐，因为它没有改变实际画布大小，只是改变了可视窗口；推荐使用标签属性调整，这真正改变了画布大小。

canvas坐标系与CSS坐标系一致，从左上角(0, 0)开始，向右下扩展为正方向。

初次体验canvas绘图，通过工具箱选择工具，设定样式并开始绘制。

绘制线段：从坐标(100, 100)到(300, 100)，长度200px，宽度10px，颜色'#000'（黑色）。通过观察，即使线宽设置为1px，实际呈现的宽度为2px，颜色变浅，这是因为浏览器最小描述单位为1px，从0.5px开始绘制到1.5px，合计1px，但实际绘制为2px，导致颜色变浅。

绘制平行线：实现两个线段，线宽分别为2px和10px，颜色分别为黑色和红色。实际绘制时，如果线宽设置不一致，会使用最后一次设置的样式，导致所有线段均采用同一样式。

绘制三角形：由三个线段组成，围成封闭图形。若直接绘制三个线段，无法形成闭合的三角形。正确做法是首先绘制形状，不闭合路径，然后使用canvas的closePath()方法自动闭合图形。