绘图 管理科学与工程学科 耿方方
绘图 管理科学与工程学科 耿方方
主要内容 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对象方法绘图