canvas绘制渐变图形,
本文介绍了帆布阴影和图形变换的示例代码，分享给大家，具体如下：
一、阴影设置
1、阴影的颜色：值为标准的半铸钢钢性铸铁(铸造半钢)颜色值，用于设定阴影颜色效果，默认是全透明的黑色
context.shadowColor=颜色；2、阴影模糊度：用户设定阴影的模糊程度，其数值不跟像素挂钩，默认为0
语境。阴影模糊=5；3、阴影的偏移：
shadowOffsetX和阴影社会用来设定阴影在X和Y轴的延伸距离。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为0
context.shadowOffsetX=10//正值：往右context.shadowOffsetY=10//正值：往下4、设置文字阴影的例子
！DOCTYPE html html head meta charset= UTF-8 title/title style type= text/CSS canvas { border:1px纯红；}/style/head body canvas id=我的画布 width= 500 height= 500 /canvas/body script type= text/JavaScript var canvas=document。getelementbyid(我的画布)；var context=画布。获取上下文(“2d”)；context.font=bold 50px微软雅黑；context.fillStyle= red//阴影的颜色context . shadow color= oranged//阴影模糊度context.shadowBlur=20//阴影的偏移context.shadowOffsetX=10//正值：往右context.shadowOffsetY=10//正值：往下context.fillText(你好,100,100);/script/html
二、图形变换
我们之前在2D变换中也学习过这些知识，但是我们帆布图形变换有所不同，不同点就是这里的变换并不是变换图形，而是变换坐标系，因此，我们在变换完一个图形之后，坐标系就发生变换了，那么我们如果再直接绘图的话就会出现问题，下面我们来具体是什么情况吧
1、为了验证我们上面的说法，我们来看一个例子
！DOCTYPE html html head meta charset= UTF-8 title/title style type= text/CSS canvas { border:1px纯红；}/style/head body canvas id=我的画布 width= 800 height= 800 /canvas/body script type= text/JavaScript var canvas=document。getelementbyid(我的画布)；var context=画布。获取上下文(“2d”)；//用黑色直线线表示开始的x/y轴语境。begin path()；context.moveTo(0，0)；语境。线宽=5；context.lineTo(800，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；语境。线宽=5；context.lineTo(0，800)；语境。笔画()；//原矩形：蓝色语境。begin path()；语境。填充样式=玉米花蓝；context.fillRect(0，0，50，50)；语境。fill()；//平移矩形：粉色语境。begin path()；context.translate(200，0) //正：往右、下语境。填充样式=深粉色；context.fillRect(0，0，50，50)；语境。fill()；//用蓝色直线表示平移以后的坐标轴语境。begin path()；context.moveTo(0，0)；语境。线宽=5；context.lineTo(400，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；语境。线宽=5；context.lineTo(0，400)；语境。笔画()；/script/html得到如下效果：证明图形变换以后是改变了坐标系的
2、旋转
！DOCTYPE html html head meta charset= UTF-8 title/title style type= text/CSS canvas { border:1px纯红；}/style/head body canvas id=我的画布 width= 800 height= 800 /canvas/body script type= text/JavaScript var canvas=document。getelementbyid(我的画布)；var context=画布。获取上下文(“2d”)；//用黑色直线表示平移以后的坐标轴语境。begin path()；context.moveTo(0，0)；context . line width=10 context . line to(800，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；context . line width=10 context . line to(0，800)；语境。笔画()；//原图：蓝色语境。begin path()；语境。填充样式=玉米花蓝；context.fillRect(100，0，50，50)；语境。fill()；//旋转：绿色语境。begin path()；语境。填充样式=石灰绿；上下文.旋转(数学。/4);context.fillRect(100，0，50，50)；//用蓝色直线表示平移以后的坐标轴语境。begin path()；context.moveTo(0，0)；语境。线宽=5；context . stroke style= blue context . line to(800，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；语境。线宽=5；context . stroke style= blue context . line to(0，800)；语境。笔画()；/script/html效果如下：
说明我们图形默认是绕帆布坐标系原点旋转的，图形在旋转的过程中，坐标系也会跟着旋转
3、图形缩放
！DOCTYPE html html head meta charset= UTF-8 title/title style type= text/CSS canvas { border:1px纯红；}/style/head body canvas id=我的画布 width= 800 height= 800 /canvas/body script type= text/JavaScript var canvas=document。getelementbyid(我的画布)；var context=画布。获取上下文(“2d”)；//用黑色直线线表示开始的坐标系语境。begin path()；context.moveTo(0，0)；context . line width=30 context . line to(100，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；context . line width=30 context . line to(0，100)；语境。笔画()；//原图：蓝色语境。begin path()；语境。填充样式=玉米花蓝；context.fillRect(100，0，50，50)；语境。fill()；//缩放：粉色，放大/小坐标系，图形大小也缩放context.scale(2，1)；//第一个参数是X轴缩放比例，第二个参数是Y轴缩放比例语境。begin path()；context . fill style= pink context . fill rect(100，0，50，50)；//用蓝色直线表示平移以后的坐标轴语境。begin path()；context.moveTo(0，0)；context . line width=10 context . stroke style= blue context . line to(100，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；context . line width=10 context . stroke style= blue context . line to(0，100)；语境。笔画()；/script/html效果如下：
我们可以看到，我们在放大X轴图形的宽度时，我们的坐标系的X轴也跟着放大了
那我们在对帆布图形做变换之后，怎么才能重新再帆布上绘制我们我们想要的图形而又不用繁琐的方式将他改变的坐标系恢复呢？
刚好帆布有状态的保存和获取
比如我们拿上面写过的例子进行演示一下状态的保存和获取效果
！DOCTYPE html html head meta charset= UTF-8 title/title style type= text/CSS canvas { border:1px纯红；}/style/head body canvas id=我的画布 width= 800 height= 800 /canvas/body script type= text/JavaScript var canvas=document。getelementbyid(我的画布)；var context=画布。获取上下文(“2d”)；//用黑色直线线表示开始的坐标系语境。begin path()；context.moveTo(0，0)；context . line width=30 context . line to(100，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；context . line width=30 context . line to(0，100)；语境。笔画()；//原图：蓝色语境。begin path()；语境。填充样式=玉米花蓝；context.fillRect(100，0，50，50)；语境。fill()；//缩放：粉色，放大/小坐标系，图形大小也缩放语境。save()；context.scale(2，1)；//第一个参数是X轴缩放比例，第二个参数是Y轴缩放比例语境。begin path()；context . fill style= pink context . fill rect(100，0，50，50)；语境。restore()；//用蓝色直线表示平移以后的坐标轴语境。begin path()；context.moveTo(0，0)；context . line width=10 context . stroke style= blue context . line to(100，0)；语境。笔画()；语境。begin path()；context.moveTo(0，0)；context . line width=10 context . stroke style= blue context . line to(0，100)；语境。笔画()；/script/html
正如你看到的效果图，我们在缩放之前保存了坐标系的状态，也就是一开始未做任何变动的状态，然后在图像缩放之后我们又将这种状态获取到，也就是回到一开始未做任何变动的状态，这就是状态的保存和获取，这样就可以解决我们图形变换对坐标系的影响了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。