1、 Canvas基础知识 1. Canvas Canvas API Canvas API通过调用 Canvas对象的 getContext0方法获得图形对象。 调用传入参数【2d】,返回的 CanvasRenderingContext2D对象就是 Canvas APl对象 实例,叫做2D渲染上下文
1、Canvas基础知识 1.1Canvas Canvas API Canvas API通过调用Canvas对象的getContext()方法获得图形对象。 调用传入参数【2d】，返回的CanvasRenderingContext2D对象就是Canvas API对象 实例，叫做2D渲染上下文
1、 Canvas基础知识 1.2绘图方法 常见的绘图方法如下 表1801 CanvasRenderingcontert2D纷图法 简要说明 void arc(flat x, float y, float radius, float start Angel, endAngle, boole ounterclockwise) 向 Canvas的当前路径上添加一段弧 向 canvas的当前路径上添加一段弧,与 void arcTo(float xl, float yl, float x2, float y2, float radius) 前一个方法相比,只是定义弧的方式不 void beginPatho 开始定义路径 void closePatho 关闭前面定义的路径 void bezier Curve To(float cpX,tpY1, at cpX2, float cp Y2,ntx|向cama的当前路径上添加一段贝塞 曲线 void clearRect(float x, float y, float width, float height 摻除制定区域上绘制的图形 从画布上裁切一块出来 Canvas Gradient createLinear Gradient(float xStart, float sTart, float xEnd foat vEnd) 创建一个线性渐变 Canvas Pattem create Patterm(image image, string style) 仓建一个图平铺 Canvas Gradient createLinear Gradient(float xStart, float yStart, float adis start, float xEnd, float yEnd, float radius End) 仓健建一个圆开变 void drawlmage(Image image, float x, float y) void drawlmage(Image image, float x, float y, float width, float height) oid drawImage(Imageimage,时 ger sx, nteger xy, integer sw, integer/雪图 float dx, float dy, float dw, float dh)
1、Canvas基础知识 1.2绘图方法 常见的绘图方法如下：
1、 Canvas基础知识 1.2绘图方法 常见的绘图方法如下 表1801 Canvas Renderingcontext2D绘图方法 简要诩明 oid fillo 填充 Canvas的当前路径 void fillRect(float x, float y, float width, float height) 填充一个矩形区域 void fillText(String text, floats, float y L float max Width]) 填充字符串 void line To(float x, float y) 把 Canvas的当前路径从当前结束点连 餐到K void move To(float x, float y) 把 Canvas的当前路径结束点移动到x void quadratic Curve To(float cpX, float cpY, float x, float y) 向 Canvas当前路径上添加段二次曲 void rect(float x, float y, float width, float beight) 向 Canvas当前路径上添加一个矩形 void stroked 沿着 Canvas当前路径绘制边框 oid strokeRect(float x, float y, float width, float height) 绘制一个矩形边框 void stroke Text(string text, float x, float y: float wiath[ float maxW)绘制字符串边框 void saved 保存当前绘图状态 void restore 恢复之前保存的绘图状态 void rotate(float angle) 旋转坐标系统 void scale(float sx, float sy) 缩放坐标系统 void translate (float dy, float dy 移坐标系
1、Canvas基础知识 1.2绘图方法 常见的绘图方法如下：
1、 Canvas基础知识 1.2绘图方法 CanvasRendering Context2D属性功能用法如下: 表1802 CanvasRenderingcontert2D属性 性名 简要识明 设置填充路径时所用的填充风格,该属性支持三种类型的值 fillstyle 符合颜色格式的字符串值,表明使用纯色填充 Canvas Gradient,表明使用渐变填充 m,表明是斩变填充 设置狯制陷径时所用的填充风格,该属性支持三种类型的值 strokeStvle 符合颜色格式的字符串值,表明使用纯色填充 Canvas gradient,表明使用渐变填充 Canvaspatten,表明是渐变填充 Font 设置绘制字符串时所用的字体 globalAlpha 设置全局透明度 globalCompositeOperation设置全局叠加效果
1、Canvas基础知识 1.2绘图方法 CanvasRenderingContext2D属性功能用法如下：
1、 Canvas基础知识 1.2绘图方法 CanvasRenderingContext2D属性功能用法如下 表1802 Canvas Rendering contert2D属性 属性名 设置线段端点的绘图形状。该属性支持如下三个值: “"but'’,黜认的属性值,该属性值指定不绘制端点,线条结尾处直接结朿。 “ round”,该属性值指定绘制圆形端点。线条结尾处绘制一个直径为线条宽度的 半圆 square”,该属性值定绘制正反醒端点。线条结尾处绘制半个边长为线条宽度 的正方形。这种形状的端点“but”形状端点相似,但线条略长。 设置线条连接点的风格。该属性支持如下3个值 meter,黑认属性值,线条连接点形如箭头 linejoin中 round,线条连接点开如愿角 bevel,线条连接点形如平角 terMite 把 lineJoin树邢没置为 meter风格时,该属性控制锐角莆头的长度 linewidth 设置笔触线条宽度φ shadow Blure 设置阴影的模糊程度 shadow colore shadow offset 设置阴影在x方向上的偏移 shadowoffsetYe 设置隕影在Y方向上的偏移 textLine 设置绘制字符串的水平对齐方式,该屬性支持 start\、end、left、nght、 center等属 性值 设置绘制字符串的垂直对齐方式,该属性支持top、 hanging、 middle、 alphabetic textbase align ideographic、 bottom等属性值
1、Canvas基础知识 1.2绘图方法 CanvasRenderingContext2D属性功能用法如下：