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绘制带有渐变效果的直线就介绍到这了。

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容