html5 图形化操作,HTML5的图象及动画图形操作.ppt

HTML5的图象及动画图形操作.ppt

文档编号：968144

文档页数：23

上传时间： 2020-03-20

文档级别：普通资源

文档类型：ppt

文档大小：616.50KB

第5章HTML5的图像及动画 5 1canvas元素 5 3图形操作 5 2使用路径画图 5 4图像操作 5 5canvas其他操作 5 6制作动画 5 7上机实践 绘制时钟 5 3图形操作 5 3 1图形样式设置前面小节所介绍的绘图方法 绘制的只是图形边缘线条及图形框架 要想使图片变得更加绚丽 就要用到图形样式设置 HTML5通过两个步骤来实现图形样式添加 首先 定义相关样式 其次 调用指定方法使图形应用指定样式 下面我们以绘制矩形并添加样式为例 介绍相关的属性和方法 fillStyle属性 为当前画布上下文设置图形样式 默认是纯黑色 使用该属性可以设置为css颜色 一个图案或一种渐变 fillRect x y width height 方法 绘制一个矩形 并使用当前的fillStyle样式 strokeStyle属性 与fillStyle属性用法相同 strokeRect x y width height 方法 绘制一个矩形 使用当前的strokeStyle样式绘制矩形的边缘 中间区域不予处理 clearRect x y width height 方法 清除指定矩形区域 下面我们通过一个例子来看这些属性和方法的具体应用 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext canvas getContext 2d context fillStyle yellow context strokeStyle red context fillRect 60 60 130 110 绘制矩形并在中间区域填充黄色context strokeRect 50 50 150 130 绘制矩形并在边缘填充红色context clearRect 70 70 110 90 清除指定区域像素 绘制带样式的矩形绘图保存此段代码并在浏览器中运行 得到的效果如图5 9所示 HTML5除了提供矩形绘图样式的属性和方法外 还对其他图形也提供了相应的属性及方法设置 使用方法大同小异 这里就不详细介绍了 5 3 2渐变图形渐变在网页设计中是经常用到的一种技术手段 指的是图形填充颜色从一种颜色逐渐转变为另一种颜色 HTML5中实现渐变主要有两种方法 线性渐变和径向渐变 下面我们介绍这两种方法的具体应用 1 线性渐变所谓线性渐变指的是点到点之间的渐变 在HTML5中通过createLinearGradient方法创建LinearGradient对象实现线性渐变 createLinearGradient方法的应用格式如下 createLinearGradient xStart yStart xEnd yEnd 图5 9为矩形添加样式 该方法中涉及的各个参数说明如下 1 xStart 渐变起始点的横坐标 2 yStart 渐变起始点的纵坐标 3 xEnd 渐变终止点的横坐标 4 yEnd 渐变终止点的纵坐标 当调用该方法时 将创建一个使用起点坐标及终点坐标的LinearGradient对象 为该对象设置渐变颜色及渐变度的方法应用格式如下 addColorStop offset color 该方法中涉及的两个参数说明如下 1 offset 颜色从离开渐变起始点开始变化的偏移量 2 color 渐变使用的颜色 下面通过一个例子来演示线性渐变的具体应用和实际效果 示例代码如下 functiondraw varcanvas document getElementById myCanvas varcontext canvas getContext 2d 为矩形添加渐变效果varmylinear context createLinearGradient 0 0 150 50 创建一个线性渐变对象mylinear addColorStop 0 red 设置第一阶段颜色mylinear addColorStop 0 8 yellow 设置第二阶段颜色mylinear addColorStop 1 green 设置第三阶段颜色context fillStyle mylinear context fillRect 0 0 250 150 绘制矩形 为文字添加渐变效果varlinearText context createLinearGradient 300 50 600 50 linearText addColorStop 0 yellow linearText addColorStop 0 5 grey linearText addColorStop 1 red context fillStyle linearText context font 30pxArial context textBase