编程 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 相关文章推荐

javascript返回顶部效果(自写代码)

Jan 06 Javascript

Mac地址验证的javascript代码

Nov 09 Javascript

只需一行代码,轻松实现一个在线编辑器

Nov 12 Javascript

json的定义、标准格式及json字符串检验

May 11 Javascript

node.js中的fs.rmdir方法使用说明

Dec 16 Javascript

jquery实现简单实用的打分程序实例

Jul 23 Javascript

javascript正则表达式定义（语法）总结

Jan 08 Javascript

详解JS异步加载的三种方式

Mar 07 Javascript

node.js调用C++函数的方法示例

Sep 21 Javascript

Vue.js标签页组件使用方法详解

Oct 19 Javascript

VUE实现强制渲染,强制更新

Oct 29 Javascript

JavaScript setInterval()与setTimeout()计时器

Dec 27 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