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

js随机颜色代码的多种实现方式

Apr 23 Javascript

jquery用get实现ajax在ie里面刷新不进入后台解决方法

Aug 12 Javascript

Javascript基础教程之JavaScript语法

Jan 18 Javascript

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

Jul 07 Javascript

详解BootStrap中Affix控件的使用及保持布局的美观的方法

Jul 08 Javascript

详解Angular中实现自定义组件的双向绑定的两种方法

Nov 23 Javascript

MockJs结合json-server模拟后台数据

Aug 26 Javascript

vue keep-alive列表页缓存详情页返回上一页不刷新,定位到之前位置

Nov 26 Javascript

js实现列表向上无限滚动

Jan 13 Javascript

JSONP解决JS跨域问题的实现

May 25 Javascript

vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

Nov 16 Javascript

vue-treeselect的基本用法以及解决点击无法出现拉下菜单

Apr 30 Vue.js

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