编程 Javascript

js+HTML5实现canvas多种颜色渐变效果的方法

Posted in Javascript onJune 05, 2015

本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>

希望本文所述对大家的web程序设计有所帮助。

- Author -

pythoner

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery 实现的页面滚动时浮动窗口控件

Jul 10 Javascript

jquery一句话全选/取消全选

Mar 01 Javascript

javascript 通用loading动画效果实例代码

Jan 14 Javascript

JS 新增Cookie 取cookie值删除cookie 举例详解

Oct 10 Javascript

javascript数组去重的六种方法汇总

Aug 16 Javascript

jQuery实现滚动条滚动到子元素位置（方便定位）

Jan 08 Javascript

微信小程序自定义对话框实例详解

Jan 20 Javascript

slideToggle+slideup实现手机端折叠菜单效果

May 25 Javascript

jQuery实现一个简单的验证码功能

Jun 26 jQuery

easyui简介_动力节点Java学院整理

Jul 14 Javascript

angular2 组件之间通过service互相传递的实例

Sep 30 Javascript

在vue中created、mounted等方法使用小结

Jul 21 Javascript

JavaSacript中charCodeAt()方法的使用详解

Jun 05 #Javascript

JavaScript中length属性的使用方法

Jun 05 #Javascript

jQuery插件bgStretcher.js实现全屏背景特效

Jun 05 #Javascript

js+html5绘制图片到canvas的方法

Jun 05 #Javascript

简介JavaScript中valueOf()方法的使用

Jun 05 #Javascript

jQuery插件jRumble实现网页元素抖动

Jun 05 #Javascript

js+html5获取用户地理位置信息并在Google地图上显示的方法

Jun 05 #Javascript