canvas绘制带有渐变效果的直线
canvas绘制带有渐变效果的直线属于前端实例代码,有关更多实例代码大家可以查看。
本章节介绍一下canvas简单的绘图功能一个实例,它实现了绘制具有渐变效果的直线。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <style type="text/css"> canvas{ border:dashed 2px #CCC } </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); cans.moveTo(0,0); cans.lineTo(400,300); var gnt1 = cans.createLinearGradient(0,0,400,300); gnt1.addColorStop(0,'red'); gnt1.addColorStop(1,'yellow'); cans.lineWidth=3; cans.strokeStyle = gnt1; cans.stroke(); } window.onload=function(){ pageLoad(); } </script> <body> <canvas id="can" width="400px" height="300px"></canvas> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function $$(id){
return document.getElementById(id);
},模拟实现了类似于jQuery中的id选择器功能。
(2).function pageLoad(){},此函数实现了绘制渐变效果直线的功能。
(3).var can = $$('can'),获取画布元素对象。
(4).var cans = can.getContext('2d'),创建一个绘画环境。
(5).cans.moveTo(0,0),把绘画路径移动到画布的(0,0)位置,也就是左上角。
(6).cans.lineTo(400,300),添加一个新的点,于是就可以创建点与点之间的线条(此方法不会创建线条)。
(7).var gnt1 = cans.createLinearGradient(0,0,400,300),建线性的渐变对象。
(8).gnt1.addColorStop(0.5,'red'),规定渐变对象中的颜色和位置。
(9).gnt1.addColorStop(1,'yellow'),和上面同样的道理。
(10).cans.lineWidth=3,设置线条的宽度。
(11).cans.strokeStyle = gnt1,设置绘制的笔触为渐变对象。
(12).cans.stroke(),绘制已经定义的路径。
二.相关阅读:
(1).getContext参阅canvas getContext()方法一章节。
(2).moveTo()参阅canvas moveTo()一章节。
(3).lineTo()参阅canvas lineTo()一章节。
(4).createLinearGradient()参阅canvas createLinearGradient()一章节。
(5).addColorStop()参阅canvas addColorStop()一章节。
canvas绘制带有渐变效果的直线,这样的场景在实际项目中还是用的比较多的,关于canvas绘制带有渐变效果的直线就介绍到这了。