[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
2017-09-28 16:40
1081 查看
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续.
一、线形渐变
线形渐变指的是一条直线上发生的渐变。
用法:
var linear = cxt.createLinearGradient( x1, y1, x2, y2 );
linear.addColorStop( value1, color1 );
linear.addColorStop( value2, color2 );
.....
oGc.fillStyle = linear
oGc.fill();
1) createLinearGradient创建一个线形渐变对象. x1, y1表示渐变的起点. x2, y2表示渐变的终点.
2)addColorStop在某处添加渐变颜色值
3)fillStyle:把渐变对象作为填充样式
4)调用fill及其他相关图形进行渐变填充
水平渐变
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/3f52148e011e223c340d765bd01aab68.png)
垂直渐变:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/c1a09eec26d2470a5fb0b742554ca874.png)
对角线渐变:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/7fad6d07722c07b989c33585b2348203.png)
为文字添加线形渐变效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/d7fc57d836948a57d0b761db78b54300.png)
二、径向渐变
颜色渐变从一个起点向各个方向渐变,用法跟线形渐变差不多,只不过创建渐变的时候用的是另一个函数
var radial = cxt.createRadialGradient( x1, y1, r1, x2, y2, r2 )
....下面的步骤跟线形渐变一样,不再重复了
x1, y1起始点的圆心坐标,r1: 起始点 圆的半径
x2,y2结束点的圆心坐标,r2:结束点 圆所在的半径
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/e903be5231001551cc64fe401f44fbea.png)
我在图中做出了第一个径向渐变的圆心坐标,便于观看
同心圆渐变:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/b25099c0fa68d326390687f5949a7a3c.png)
三、阴影设置
跟css3的边框阴影用法差不多.
cxt.shadowOffsetX: 水平阴影,可以设置正负数, 正数->向右偏移,负数->向左偏移
cxt.shadowOffsetY: 垂直阴影,可以设置正负数,正数->向下偏移,负数->向上偏移
cxt.shadowColor: 阴影的颜色
cxt.shadowBlur: 阴影的模糊范围
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/f9bd2e4d7cb53429364811341e5f748f.png)
给文字设置阴影:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/c2a65f36921d010ffb8fd008724ac23c.png)
给图片设置阴影
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/8139ac0042856d99b7449f89958fbf2a.png)
给图片的四周设置阴影:
把shadowOffsetX和shadowOffsetY都设置为0,那么就会在四周产生阴影效果
一、线形渐变
线形渐变指的是一条直线上发生的渐变。
用法:
var linear = cxt.createLinearGradient( x1, y1, x2, y2 );
linear.addColorStop( value1, color1 );
linear.addColorStop( value2, color2 );
.....
oGc.fillStyle = linear
oGc.fill();
1) createLinearGradient创建一个线形渐变对象. x1, y1表示渐变的起点. x2, y2表示渐变的终点.
2)addColorStop在某处添加渐变颜色值
3)fillStyle:把渐变对象作为填充样式
4)调用fill及其他相关图形进行渐变填充
水平渐变
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ); var linear = oGc.createLinearGradient( 0, 400, 500, 400 ); linear.addColorStop( 0, 'red' ); linear.addColorStop( 1, '#09f' ); oGc.fillStyle = linear; oGc.fillRect( 0, 0, 500, 400 ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/3f52148e011e223c340d765bd01aab68.png)
垂直渐变:
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ); var linear = oGc.createLinearGradient( 400, 0, 400, 500 ); linear.addColorStop( 0, 'red' ); linear.addColorStop( 1, '#09f' ); oGc.fillStyle = linear; oGc.fillRect( 0, 0, 500, 400 ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/c1a09eec26d2470a5fb0b742554ca874.png)
对角线渐变:
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ); var linear = oGc.createLinearGradient( 0, 0, 400, 500 ); linear.addColorStop( 0, 'red' ); linear.addColorStop( 1, '#09f' ); oGc.fillStyle = linear; oGc.fillRect( 0, 0, 500, 400 ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/7fad6d07722c07b989c33585b2348203.png)
为文字添加线形渐变效果
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ), text = '跟着ghostwu学习html5 canvas教程'; oGc.font = '22px bold 微软雅黑'; var linear = oGc.createLinearGradient( 20, 100, 400, 100 ); linear.addColorStop( 0, 'red' ); linear.addColorStop( 1, '#09f' ); oGc.fillStyle = linear; oGc.fillText( text, 50, 100 ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/d7fc57d836948a57d0b761db78b54300.png)
二、径向渐变
颜色渐变从一个起点向各个方向渐变,用法跟线形渐变差不多,只不过创建渐变的时候用的是另一个函数
var radial = cxt.createRadialGradient( x1, y1, r1, x2, y2, r2 )
....下面的步骤跟线形渐变一样,不再重复了
x1, y1起始点的圆心坐标,r1: 起始点 圆的半径
x2,y2结束点的圆心坐标,r2:结束点 圆所在的半径
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ), width = oCanvas.width, height = oCanvas.height; oGc.beginPath(); oGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false ); oGc.closePath(); var radial = oGc.createRadialGradient( 150, 50, 10, 100, 100, 100 ); radial.addColorStop( 0.1, 'white' ); radial.addColorStop( 0.6, 'orange' ); radial.addColorStop( 1, 'red' ); oGc.fillStyle = radial; oGc.fill(); oGc.beginPath(); oGc.arc( 320, 100, 100, 0, 360 * Math.PI / 180, false ); oGc.closePath(); var radial2 = oGc.createRadialGradient( 280, 50, 10, 320, 100, 100 ); radial2.addColorStop( 0.1, 'white' ); radial2.addColorStop( 0.6, 'orange' ); radial2.addColorStop( 1, 'rgba( 255, 0, 0, 0.5 )' ); oGc.fillStyle = radial2; oGc.fill(); oGc.beginPath(); oGc.lineWidth = 1; oGc.strokeStyle = '#eee'; for( var i = 0; i < width; i += 10 ){ oGc.moveTo( i, 0 ); oGc.lineTo( i, height ); } for( var j = 0; j < height; j += 10 ){ oGc.moveTo( 0, j ); oGc.lineTo( width, j ); } oGc.closePath(); oGc.stroke(); oGc.beginPath(); oGc.fillStyle = 'red'; oGc.strokeStyle = 'blue'; oGc.moveTo( 150, 0 ); oGc.lineTo( 150, height ); oGc.moveTo( 0, 50 ); oGc.lineTo( width, 50 ); oGc.fillText( '(150,50)', 170, 30 ); oGc.stroke(); oGc.closePath(); oGc.beginPath(); oGc.strokeStyle = 'yellow'; oGc.fillStyle = 'black'; oGc.moveTo( 100, 0 ); oGc.lineTo( 100, height ); oGc.moveTo( 0, 100 ); oGc.lineTo( width, 100 ); oGc.fillText( '(100,100)', 30, 120 ); oGc.stroke(); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/e903be5231001551cc64fe401f44fbea.png)
我在图中做出了第一个径向渐变的圆心坐标,便于观看
同心圆渐变:
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ), width = oCanvas.width, height = oCanvas.height; var radial = oGc.createRadialGradient( 100, 100, 0, 100, 100, 100 ); radial.addColorStop( 0, 'red' ); radial.addColorStop( 0.25, 'orange' ); radial.addColorStop( 0.5, 'yellow' ); radial.addColorStop( 0.75, 'green' ); radial.addColorStop( 1, '#09f' ); oGc.fillStyle = radial; oGc.fillRect( 10, 10, 200, 200 ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/b25099c0fa68d326390687f5949a7a3c.png)
三、阴影设置
跟css3的边框阴影用法差不多.
cxt.shadowOffsetX: 水平阴影,可以设置正负数, 正数->向右偏移,负数->向左偏移
cxt.shadowOffsetY: 垂直阴影,可以设置正负数,正数->向下偏移,负数->向上偏移
cxt.shadowColor: 阴影的颜色
cxt.shadowBlur: 阴影的模糊范围
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ), width = oCanvas.width, height = oCanvas.height; oGc.shadowOffsetX = 5; oGc.shadowOffsetY = 5; oGc.shadowColor = '#09f'; oGc.shadowBlur = 10; oGc.fillStyle = 'red'; oGc.fillRect( 10, 10, 100, 100 ); oGc.shadowOffsetX = -5; oGc.shadowOffsetY = -5; oGc.shadowColor = '#09f'; oGc.shadowBlur = 10; oGc.fillStyle = 'red'; oGc.fillRect( 140, 20, 100, 100 ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/f9bd2e4d7cb53429364811341e5f748f.png)
给文字设置阴影:
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ), width = oCanvas.width, height = oCanvas.height; oGc.shadowOffsetX = 2; oGc.shadowOffsetY = 2; oGc.shadowColor = '#09f'; oGc.shadowBlur = 1; oGc.font = '30px bold 微软雅黑'; oGc.fillText( '跟着ghostwu学习html5 canvas', 20, 100 ); } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/c2a65f36921d010ffb8fd008724ac23c.png)
给图片设置阴影
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ), width = oCanvas.width, height = oCanvas.height; var oImg = new Image(); oImg.src = './img/mv.jpg'; oImg.onload = function(){ oGc.shadowOffsetX = 5; oGc.shadowOffsetY = 5; // oGc.shadowOffsetX = 0; // oGc.shadowOffsetY = 0; oGc.shadowColor = '#888'; oGc.shadowBlur = 20; oGc.fillRect( 50, 20, 200, 200 ); oGc.drawImage( oImg, 50, 20 ); } } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/8139ac0042856d99b7449f89958fbf2a.png)
给图片的四周设置阴影:
把shadowOffsetX和shadowOffsetY都设置为0,那么就会在四周产生阴影效果
<head> <meta charset='utf-8' /> <style> #canvas{ border:1px dashed #aaa; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), oGc = oCanvas.getContext( '2d' ), width = oCanvas.width, height = oCanvas.height; var oImg = new Image(); oImg.src = './img/mv.jpg'; oImg.onload = function(){ oGc.shadowOffsetX = 0; oGc.shadowOffsetY = 0; oGc.shadowColor = '#888'; oGc.shadowBlur = 20; oGc.fillRect( 50, 20, 200, 200 ); oGc.drawImage( oImg, 50, 20 ); } } </script> </head> <body> <canvas id="canvas" width="500" height="400"></canvas> </body>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/02/115cd4363c2b7d731023baf67a2e4805.png)
相关文章推荐
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
- [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
- [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
- [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
- [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格
- [js高手之路] html5 canvas教程 - 绘制七巧板
- [js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
- [js高手之路]html5 canvas动画教程 - 下雪效果
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹