绘图 管理科学与工程学科 耿方方
绘图 管理科学与工程学科 耿方方
主要内容 Canvas基础知识 图形绘制 图形变换与控制
主要内容 Canvas基础知识 图形绘制 图形变换与控制
应用领域 ■1、游戏 ■2、可视化数据::百度的 chart、d3.js、 three.js 3、 banner广告 4、未来 ■模拟器:无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由 JavaScript来 实现。 ■远程计算机控制: Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的 可视化控制界面。 图形编辑器: Photoshop图形编辑器将能够100%基于Web实现
应用领域 1、游戏 2、可视化数据：: 百度的echart、d3.js、three.js 3、banner广告 4、未来 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来 实现。 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的 可视化控制界面。 图形编辑器：Photoshop图形编辑器将能够100%基于Web实现
1、 Canvas基础知识 1. Canvas 基本原理 Canvas元素在页面上提供一块像画布一样无色透明的区域,可通过 Javascrip脚本绘制图形。 在HTM页面上定义 Canvas元素除了可以指定id、 style、 class、 hidden等通用属性之外,还可以指定以下2个属性: height:设置画布组件的高度。 ■ width:设置画布组件的宽度
1、Canvas基础知识 1.1Canvas 基本原理 Canvas元素在页面上提供一块像画布一样无色透明的区域，可通过 Javascript脚本绘制图形。 在HTML页面上定义Canvas元素除了可以指定id、style、class、 hidden等通用属性之外，还可以指定以下2个属性： height：设置画布组件的高度。 width：设置画布组件的宽度
1、 Canvas基础知识 1. Canvas 在画布上绘制图形必须经过以下三个步骤: 获取 Canvas对应的DOM对象,得到一个 Canvas对象。 调用 Canvas对象的 getContext0方法,得到 CanvasRenderingContex2D对 象(可绘制图形)。 调用 CanvasRenderingContext2D对象方法绘图
1、Canvas基础知识 1.1Canvas 在画布上绘制图形必须经过以下三个步骤： 获取Canvas对应的DOM对象，得到一个Canvas对象。 调用Canvas对象的getContext()方法，得到CanvasRenderingContext2D对 象（可绘制图形）。 调用CanvasRenderingContext2D对象方法绘图
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属性功能用法如下：