摘要：设置绘制字符串的垂直对齐方式，该属性支持等属性值。调用的方法关闭子路径。与前一个方法相比，只是定义弧的方式不同。把的当前路径从当前结束点连接到对应的点。向添加一段二次曲线。
1.使用canvas元素
在HTML页面上定义
height：该属性设置该画布组件高度
width：该属性设置该画布组件宽度
在HTML网页上定义
获取
调用Canvas对象的getContent()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形。
调用CanvasRendingContext2D对象的方法绘图。
canvas
画图入门
2.绘制几何图形
rect
绘制图形
3.绘制字符串
CanvasRenderingContext2D为绘制文字提供了如下两个方法：
fillText(String text,float x,float y,[float maxWidth])：填充字符串
stroke(String text,float x,float y,[float maxWidth]):绘制字符串边框
为了设置绘制字符串时所用的字体、字体对齐方式，CanvasRenderingContext2D还提供了如下两个属性：
textAlign：该属性支持start、end、left、right、center等属性值。
textBaseAlign：设置绘制字符串的垂直对齐方式，该属性支持top、hanging、middle、alphabetic、idecgraphic、bottom等属性值。
绘制文字
绘制文字
4. 设置阴影
CanvasRenderingContext2D为设置图形阴影提供了如下属性：
shadowBlur：设置阴影的模糊度。该属性值是一个浮点数，该数值越大。阴影的模糊程度就越大。
shadowColor：设置阴影的颜色。
shadowOffsetX：设置阴影在X方向的偏移。
shadowOffsetY：设置阴影在Y方向的偏移。
启用阴影
启用阴影
5.使用路径
CanvasRenderingContext2D并没有直接提供绘制图形、椭圆等几何图形的方法。为了在Canvas上绘制更复杂的图形，必须在Canvas上启用路径，借助于路径来绘制图形。
在Canvas上使用路径，可按如下步骤进行：
调用CanvasRenderingContext2D对象的beginPath()方法开始定义路径。
调用CanvasRenderingContext2D各种方法添加子路径。
调用CanvasRenderingContext2D的closePath()方法关闭子路径。
调用CanvasRenderingContext2D的fill()或stroke()方法来填充路径或绘制路径边框。
CanvasRenderingContext2D对象提供了如下方法来添加子路径：
arc(float x,float y,float radius,float startAngle,endAngle,boolean counterclockwise)：向Canvas的当前路径上添加一段弧。绘制以x、y为圆心，radius为半径，从startAngle角度开始，到endAngle角度结束的圆弧。startAngle、endAngle以弧度为单位。该方法的前两个参数指定圆弧的圆心，第三个参数用于设置圆弧的半径，第四、五个参数则用于设置圆弧的开始角度、结束角度，最后一个角度用于设置是否顺时针旋转。
arcTo(float x1,float y1,float x2,float y2,float radius)：向Canvas的当前路径上添加一段弧。与前一个方法相比，只是定义弧的方式不同。该方法也是绘制一段圆弧，确定这段圆弧的方式是：假设从当前点到 P1(x1,y1)绘制一条线条，再从P1(x1,y1)到P2(x2,y2) 绘制一条线条，arcTo()则绘制一段同时与上面两条线条相切，且半径为radius的圆弧。
bezierCurveTo(float cpX1,float cpY1,float cpX2,float cpY2,float x,float y):向Canvas的当前路径上添加一段贝济埃曲线。
lineTo(float x,float y):把Canvas的当前路径从当前结束点连接到x、y对应的点。
moveTo(float x,float y):把Canvas的当前路径的结束点移动到x、y对应的点。
quadraticCurveTo(float cpX,float cpY,float x,float y):向Canvas添加一段二次曲线。
rect(float x,float y,float width,float height):向Canvas的当前路径添加一个矩形。
绘制圆形
绘制圆形
使用arcTo()方法绘制一个圆角矩形。
arcTo示例
arcTo 示意
其中moveTo(x,y)和`lineToo(x,y)，前者是把绘制点移动到指定点，而后者则负责绘制从当前点到指定点(x,y)的线条。
lineTo示例
lineTo示例
6.绘制图形
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50050.html
摘要：学习资源来自慕课网炫丽的倒计时效果绘图与动画基础，非常感谢老师的课程分享创建标签的标签定义了一块画布，我们所有的绘图都是基于这一块画布。正是因为是基于状态的，所以不同的状态应该有明确的起始标志。 喜欢前端，学习前端的最原始的动机，就是因为它可以制作非常酷炫的效果。然而现在上班所用的技巧，多是在业务逻辑那一块，并非是我最初想要去做的东西。所以在下班以后，打算重新拾起自己的兴趣，去学习真正...
摘要：若要在上绘图，首先得获取渲染上下文。此处指的，不谈示例的属性通过设置上下文的属性，可以指定绘图的样式。 一. Canvas是啥 < canvas > 是一个可以使用脚本（通常是js）来绘图的HTML元素 < canvas > 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari 如今，所有主流的浏览器都支持它（IE9+,更低版本需引入Expl...
摘要：使用将能够利用硬件加速从而提高渲染性能。这个渲染器比渲染器有更好的性能。声明构造器是一个可选对象，包含用来定义渲染器行为的属性。所用的渲染上下文对象。设置背景色和背景色透明度渲染器渲染器不使用来绘制场景，而使用相对较慢的。 渲染器api WebGL渲染器（WebGLRenderer） WebGL渲染器使用WebGL来绘制您的场景，如果您的设备支持的话。使用WebGL将能够利用GPU硬...
阅读 1342·2021-09-24 10:26
阅读 3655·2021-09-06 15:02
阅读 603·2019-08-30 14:18
阅读 575·2019-08-30 12:44
阅读 3118·2019-08-30 10:48
阅读 1936·2019-08-29 13:09
阅读 1992·2019-08-29 11:30
阅读 2278·2019-08-26 13:36
