HTML5+CSS3程序设计第5章 使用HTML5绘制图形.pptVIP

* 使用HTML5绘制图形 01 认识HTML5 中的画布 02 绘制基本图形 04 绘制文字 03 使用图像 认识HTML5 中的画布 1 主要内容 什么是canvas 1 在HTML5里创建canvas画布 2 使用canvas绘制图形示例 3 什么是canvas Canvas元素是HTML5中新增的一个重要元素，用来绘制图形。相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘，也可以绘制高级动画。 在HTML里创建画布 canvas id=canvas width=200 height=200 /canvas 默认情况下该矩形区域宽为300像素，高为150像素。 使用canvas绘制图形示例 绘制基本图形 2 主要内容 绘制矩形 2 绘制圆形 4 绘制平移效果图形 6 绘制直线 1 绘制曲线 3 绘制渐变图形 5 绘制旋转效果图形 8 绘制缩放效果图形 7 绘制基本图形 绘制步骤 var cav=document.getElementById(mr-cav) var canvas.getContext(2d) 线条样式和填充样式 trokeStyle=”#f00”和fillStyles=”#0f0” 绘制图形 cav.beginPath() 获取画布和图形上下文 HTML中创建画布 canvas id=”canvas”/canvas 绘制基本图形 var cav=document.getElementById(mr-cav).getContext(2d) 绘制基本图形 基本图形 曲线 圆形 绘制直线 线条样式: 线条粗细: strokeStyle 设置起点: 设置终点: lineTo() moveTo() lineWidth 直线 矩形 绘制基本图形 基本图形 曲线 圆形 绘制矩形 线条样式: 填充样式: strokeStyle 线条粗细: 开始绘制: rect(x,y,w,h) moveTo() lineWidth 直线 矩形 绘制基本图形 贝塞尔二次曲线: 贝塞尔三次曲线: quadraticCurveTo(cp1x,cp1y,x,y) 闭合路径: closePath() bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) (cp1x,cp1y) (cp2x,cp2y) (cp1x,cp1y) 绘制曲线 曲线 圆形 基本图形 直线 矩形 绘制基本图形 语法： arc( x,y,radius,startAngle,endAngle,anticlockwise) 曲线 圆形 基本图形 直线 矩形 参数解释 x,y 所绘制圆形的圆心坐标 所绘制圆形的半径 radius 所绘制圆形的起始弧度 startAngle 所绘制圆形的终止弧度 endAngle 绘制圆形的方向 anticlockwise 参数 参数含义 绘制圆形 绘制渐变图形 渐变图形 径向渐变 线性渐变 创建渐变： createLinearGradient(xStart,yStart,xEnd,yEnd) 线性渐变 offset： 颜色离开渐变起始点的偏移量（0~1） color： 设定的颜色 渐变颜色： addColorStop(offset,color) xStart,yStart： 线性渐变的起始坐标 xEnd,yEnd： 线性渐变的终止坐标 绘制变形图形 变形图形 旋转 平移 缩放 translate(x, y) 向左、向下移动的单位长度（允许负值） scale(x,y) 水平和垂直方向放大的倍数（0~1是为缩小） rotate(angle) 顺时针旋转的角度（允许负值） 使用图像 3 主要内容 引入图像 1 平铺图像 2 裁剪图像 3 引入图像 引入图像 drawImage() 1 drawImage(image, x, y) image img元素、video元素、JavaScript中的image对象 该图像在画布中的起始坐标 参数解释： X,Y 引入图像 引入图像 drawImage() 2 drawImage(image, x, y,width, height) image img元素、video元素、JavaScript中的image对象 该图像在画布中的起始坐标 参数解释： X,Y 绘制时图像的宽度和高度 width,height 引入图像 引入图像 drawImage() 3 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) image img元素、video元素、JavaScript中的image对象 该图像在画布中的起始坐标 参数解释： sx, sy 绘制时图