HTML5程序设计-3期（KC014）线性渐变颜色和放射渐变颜色线性渐变颜色和放射渐变颜色.pptxVIP

主讲人： 史美艳 线性渐变颜色和放射渐变颜色 渐变颜色 创建CanvasGradient对象 为渐变对象设置颜色和位置 设置线条样式为渐变颜色 设置填充样式为渐变颜色 1.创建CanvasGradient对象 CanvasGradient用于定义画布中的渐变颜色对象。如果要使用渐变颜色，首先需要创建一个CanvasGradient对象。可以通过下面2种方法创建CanvasGradient对象： （1）以线性颜色渐变方式创建CanvasGradient对象。 （2）以放射颜色渐变方式创建CanvasGradient对象。 1.创建CanvasGradient对象 (1) 使用createLinearGradient() 方法以线性颜色渐变方式创建CanvasGradient对象。语法如下： createLinearGradient(xStart, yStart, xEnd, yEnd) 参数xStart和yStart是渐变的起始点坐标，xEnd和yEnd是渐变的结束点坐标。 (2)使用createRadialGradient() 方法以放射颜色渐变方式创建CanvasGradient对象。语法如下： createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) 参数xStart和yStart是开始圆的圆心坐标，radiusStart是开始圆的半径；参数xEnd和yEnd是结束圆的圆心坐标，radiusEnd是结束圆的半径。 2. 为渐变对象设置颜色和位置 创建CanvasGradient对象后，还需要为其设置颜色基准，可以通过CanvasGradient对象的 addColorStop()方法在渐变中的某一点添加一个颜色变化。渐变中其他点的颜色将以此为基准。addColorStop()方法的语法如下： addColorStop(offset, color) 参数offset是一个范围在0.0到1.0之间的浮点值，表示渐变的开始点和结束点之间的一部分。offset为0，对应开始点，offset为1，对应结束点。Color指定offset显示的颜色。沿着渐变某一点的颜色是根据这个值以及任何其他的颜色色标来插值的。 3. 设置线条样式为渐变颜色 【例】使用红、绿、黄的渐变颜色绘制一个矩形边框 canvas id=“myCanvas” width=“300” height=“150” style=“border: 1px solid #d3d3d3;” 您的浏览器不支持 canvas元素。/canvas script type=text/javascript var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.beginPath(); ctx.rect(100,50,100,50); var grd = ctx.createLinearGradient(100,50, 200,50); grd.addColorStop(0, yellow); grd.addColorStop(0.5, green); grd.addColorStop(1, red); ctx.lineWidth = 10; ctx.strokeStyle = grd; ctx.stroke(); /script 【例】通过多个 addColorStop() 方法来定义渐变 canvas id=“myCanvas” width=“300” height=“150” 您的浏览器不支持 canvas。/canvas script var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,black); grd.addColorStop(0.3,magenta); grd.addColorStop(0.5,blue); grd.addColorStop(0.6,green); grd.addColorStop(0.8,yellow); grd.addColorStop(1,red); ctx.fillStyle=grd; ctx.fillRect(20,20,150,100); /script 4. 设置填充样式为渐变颜色