快捷导航
蚂蚁部落 网站首页 实例代码 canvas实例 查看内容

addColorStop()第一个参数功能简单介绍

2017-2-2 17:06| 发布者: admin| 查看: 738| 评论: 0|来自: 蚂蚁部落

关于此方法的基本用法可以参阅canvas addColorStop()一章节。

可能很多朋友对于此方法的第一个参数功能还不是太明了,下面就通过简单的实例代码进行以下简单介绍。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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');
  var gnt1 = cans.createLinearGradient(10,0,390,0);
  gnt1.addColorStop(0.4,'red');
  gnt1.addColorStop(0.8,'blue');
  cans.fillStyle = gnt1;
  cans.fillRect(10,10,380,180);
}
window.onload=function(){
  pageLoad();
}
</script>
<body>
<canvas id="can" width="400px" height="300px"></canvas>
</body>
</html>

上面的代码是简单的addColorStop()方法的应用,下面就做一下简单介绍。

其实第一个参数就是规定图片的渐变区域的,当然只有一个无法形成渐变,需要两个才能形成一个渐变区域。

如下代码:

[JavaScript] 纯文本查看 复制代码运行代码
gnt1.addColorStop(0.4,'red');
gnt1.addColorStop(0.8,'blue');

此段代码就是规定图像的40%-80%之间是渐变区域,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/02/170802mnpjnppys99rcmnf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-6-27 16:45 , Processed in 0.117166 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部