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

小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能

Nov 30 Javascript

document.onreadystatechange事件的用法分析

Oct 17 Javascript

javascript中encodeURI和decodeURI方法使用介绍

May 06 Javascript

使用javascript实现有效时间的控制,并显示将要过期的时间

Jan 02 Javascript

鼠标经过tr时,改变tr当前背景颜色

Jan 13 Javascript

JS实现关键字搜索时的相关下拉字段效果

Aug 05 Javascript

JavaScript的jQuery库中function的存在和参数问题

Aug 13 Javascript

jQuery幻灯片特效代码分享--鼠标滑过按钮时切换（2）

Nov 18 Javascript

jQuery.Uploadify插件实现带进度条的批量上传功能

Jun 08 Javascript

Bootstrap下拉菜单样式

Feb 07 Javascript

vue实现图片懒加载的方法分析

Feb 05 Javascript

vue 遮罩层阻止默认滚动事件操作

Jul 28 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

You might like

PHP中在数据库中保存Checkbox数据(1)

2006/10/09 PHP

CI框架安全类Security.php源码分析

2014/11/04 PHP

功能强大的PHP图片处理类(水印、透明度、旋转)

2015/10/21 PHP

php删除数组中重复元素的方法

2015/12/22 PHP

PHP自定义序列化接口Serializable用法分析

2017/12/29 PHP

PHP实现读取文件夹及批量重命名文件操作示例

2019/04/15 PHP

javascript开发随笔一 preventDefault的必要

2011/11/25 Javascript

简述JavaScript的正则表达式中test()方法的使用

2015/06/16 Javascript

jQuery实现鼠标悬停3d菜单展开动画效果

2017/01/19 Javascript

微信小程序--onShareAppMessage分享参数用处(页面分享)

2017/04/18 Javascript

浅谈JavaScript中的属性:如何遍历属性

2017/09/14 Javascript

ES6使用export和import实现模块化的方法

2018/09/10 Javascript

JS将时间秒转换成天小时分钟秒的字符串

2019/07/10 Javascript

[01:38]完美世界DOTA2联赛（PWL）宣传片：第一站

2020/10/26 DOTA

Python的面向对象思想分析

2015/01/14 Python

Python多进程分块读取超大文件的方法

2016/04/13 Python

Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)

2018/04/30 Python

Python定时任务sched模块用法示例

2018/07/16 Python

python 定时器,实现每天凌晨3点执行的方法

2019/02/20 Python

Django实现单用户登录的方法示例

2019/03/28 Python

python基于paramiko将文件上传到服务器代码实现

2019/07/08 Python

python安装mysql的依赖包mysql-python操作

2021/01/01 Python

美国摄影爱好者购物网站：Focus Camera

2016/10/21 全球购物

西海岸男士和男童服装：Johnnie-O

2018/03/15 全球购物

eHarmony英国：全球领先的认真恋爱约会平台之一

2020/11/16 全球购物

在c#中using和new这两个关键字有什么意义

2013/05/19 面试题

面试求职的个人自我评价

2013/11/16 职场文书

50岁生日感言

2014/01/23 职场文书

致接力运动员广播稿

2014/02/17 职场文书

《小小竹排画中游》教学反思

2014/02/26 职场文书

答谢会策划方案

2014/05/12 职场文书

总经理人事任命书

2014/06/05 职场文书

教师求职信

2014/06/17 职场文书

走进毛泽东观后感

2015/06/04 职场文书

2016年小学教师师德承诺书

2016/03/25 职场文书

Python如何使用logging为Flask增加logid

2021/03/30 Python