Web前端技术课件 图形与图像

HTML5图形与图像学习导图8.1.1前端页面中的图形图像Web页面中的图形与图像有四种实现方式：使用PNG、GIF、JPG位图文件使用CSS3绘制图形效果（优先使用，修改调试成本低，字节数少）使用Canvas画布进行像素级的绘制（依赖JS，适合像素级操作、数学图形绘制，Canvas相当于黑板，任何绘制在上面的图形如果要移动或改变状态，都需要把整块黑板全部擦除，再重新绘制）使用SVG文件实现矢量图形及其动画效果的绘制（适合矢量操作，SVG有无损的图像质量，良好交互特性，能够直接嵌入页面减少HTTP请求，还可以使用CSS进行控制）8.1.2前端页面坐标系统event.screenX和event.screenY相对于显示屏的坐标，坐标(0,0)为显示屏幕的左上角；event.clientX和event.clientY相对于浏览器窗口可视区域的坐标，坐标(0,0)为浏览器窗口的左上角；event.offsetX和event.offetY获得相对于点击元素的坐标，坐标(0,0)为鼠标所点击元素的左上角。8.1.2前端页面坐标系统获取鼠标点击页面的坐标8.2Canvas图形与图像绘制8.2.1Canvas元素的定义Canvas元素定义了一个矩形区域，在该区域中可以绘制任意图形，并对每一个像素进行控制。/demo/tearable-cloth/index.html<canvasid="myCanvas"width="600"height="400“style="border:1pxsolid“></canvas>在Canvas中绘制图形前，需要先调用getContext方法获得绘图环境。8.2.1Canvas元素的定义定义Canvas8.2.2直线线条的绘制8.2.3曲线线条的绘制Canvas中可以绘制二次贝塞尔曲线和三次贝塞尔曲线。二次贝塞尔曲线需要指定三个点，分别是起始点、控制点和终点，控制点主要用于控制曲线的斜率。三次贝塞尔曲线增加了两个控制点，其中一个控制点控制曲线向上的斜率，另一个控制点控制曲线向下的斜率，加上起始点和终点，三次贝塞尔曲线一共需要指定四个点。绘制曲线线条8.2.3曲线线条的绘制8.2.4矩形的绘制Canvas中矩形的绘制分为两种，一种是不带填充效果的矩形，使用rect方法或strokeRect方法绘制；另一种是带填充效果的，一般是在设置填充颜色后，调用fillRect方法完成矩形的绘制。8.2.5圆的绘制canvas中绘制圆或圆弧采用arc方法，该方法接收6个参数，例如：arc(100,100,50,0,Math.PI*2,0)，其中前两个参数表示绘制圆的圆心坐标，第三个参数表示半径，第四个参数表示圆的起始角度，第五个参数表示圆的终止角度，最后一个参数表示按顺时针或逆时针绘制，取值0或false表示按顺时针绘制，取值1或true表示按逆时针绘制，默认是顺时针。圆中的角度定义8.2.5圆的绘制绘制圆8.2.6图像的绘制创建一个Image对象，在Image对象的onload事件中调用drawImage方法，该方法接收5个参数，第一个参数是创建的Image对象，后面的四个参数分别为图像的左上角坐标和图像的宽度和高度。onload事件后，还需要设置Image对象的src属性。8.2.7文字的绘制font属性主要设置字体样式、字号、字体名称等；lineWidth属性用来设置线条宽度；strokeText方法用来绘制无填充效果的文字，接收3个参数，第一个参数是要绘制的文字，需要用双引号标引，后两个参数则是文字的左上角坐标；textAlign属性设置文字的对齐方式；fillText方法用来绘制具有填充效果的文字，参数含义同strokeText方法。8.3Canvas图形变换8.3.1平移变换平移变换使用translate方法，该方法接收两个参数，分别表示坐标原点沿水平和垂直两个方向的偏移量，translate方法移动的是坐标原点而不是元素。8.3.3旋转变换旋转变换使用rotate方法，该方法只有一个参数，即旋转角度angle，旋转角度以顺时针方向为正方向，以弧度为单位。注意旋转中心为画布的原点，即图形是以画布原点进行旋转，而不是以自身的左上角旋转。8.3.4状态的保存与恢复在有些场合下，可以在变换操作之前先保存画布当前状态，当变换操作完成后，再将之前保存的状态进行恢复。Canvas提供了save和restore两种方法，save方法用来存储画布状态，包括画布原点位置，restore方法则用来恢复存储的画布状态。8.4Canvas绘图效果8.4.1渐变填充效果线性渐变使用createLinearGredient方法创建线性渐变对象，基本语法为：createLinearGredient(x1,y1,x2,y2)。该语法定义一个待渐变的区域，X轴是从x1渐变到x2，Y轴是从y1渐变到y2，其中(x1,y1)为渐变的起点，(x2,y2)为渐变的终点；调用addColorStop方法定义渐变填充色，基本语法为：addColorStop(position,color)，该语法为不同位置设置不同的颜色，其中position指定0到1之间的数值，表示填充区域的位置，第二个参数则是填充的颜色；将创建好的线性渐变对象赋值给context的fillStyle属性。8.4.1渐变填充效果线性渐变效果8.4.1渐变填充效果径向渐变使用createRadialGradient方法创建canvasGradient，然后使用addColorStop方法定义渐变颜色。createRadialGredient(x1,y1,r1,x2,y2,r2)方法接收6个参数，其中x1、y1、r1定义一个以(x1,y1)为圆心，半径为r1的小圆，x2、y2、r2定义一个为以(x2,y2)为圆心，半径为r2的大圆。8.4.2图案填充效果在Canvas中，可以利用createPattern方法实现图案填充效果，基本语法为：createPattern(image,type)。参数image为要引用的image对象或另一个canvas对象，type是所引用对象的平铺类型，可以取值repeat、repeat-x、repeat-y、no-repeat。创建图案填充的步骤与创建渐变类似，需要先创建出一个pattern，然后再将pattern赋予fillStyle属性或strokeStyle属性。8.4.3透明度效果Canvas中提供了两种创建透明度效果的方法。一种是使用globalAlpha属性，例如context.globalAlpha=0.3，该属性用于为当前canvas中的所有图形设置相同的透明度；另一种方法是使用rgba(r,g,b,a)，通过设置alpha参数为不同图形设置不同的透明度。8.4.4阴影效果在Canvas中创建阴影效果，需要用到下面4个属性：shadowOffsetX（阴影的水平偏移）、shadowOffsetY（阴影的垂直偏移）、shadowBlur（阴影模糊程度）和shadowColor（阴影颜色），默认为黑色，可以添加透明度。8.4.5图形组合效果当两个或两个以上的图形存在重叠区域时，默认情况下新绘制的图形会叠在前一个图像之上。通过指定图像globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式，该属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。8.5Canvas综合应用8.5.1八卦图与时钟绘制8.5.2雪花粒子特效8.6SVG图形绘制8.6.1SVG线条绘制SVG的创建和Canvas类似，只需在HTML中使用svg元素，例如：<svgwidth="300"height="300"style="border:1pxsolid"></svg>。创建SVG画布后，就可以在上面绘制任意的图形。直线的绘制，使用line元素。8.6.1SVG线条绘制另一种线条类型是折线，用元素polyline定义，折线实际上是由多个点组成的直线段，其中points是polyline的重要属性，包含折线中的多个点的定义。8.6.2SVG矩形与多边形绘制SVG使用rect属性创建矩形。8.6.2SVG矩形与多边形绘制多边形的创建使用polygon元素，用来创建含有不少于三个边的图形。polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是polygon的路径在最后一个点处自动回到第一个点。8.6.3SVG圆与椭圆绘制多边形的创建使用polygon元素，用来创建含有不少于三个边的图形。polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是polygon的路径在最后一个点处自动回到第一个点。8.6.4SVG路径绘制path元素是SVG基本图形中最强大的一个，它不仅能创建其他基本图形，通过组合还能创建更加复杂的形状。例如可以用path元素绘制矩形、圆形、椭圆、折线形、多边形、贝塞尔曲线等。path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。path中常用命令有：M=moveto、L=lineto、H=horizontallineto、V=verticallineto、C=curveto、S=