编程 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 iframe内部出滚动条

Feb 11 Javascript

页面调用单个swf文件，嵌套出多个方法。

Nov 21 Javascript

javascript使用location.search的示例

Nov 05 Javascript

JavaScript实现强制重定向至HTTPS页面

Jun 10 Javascript

JavaScript学习小结之使用canvas画“哆啦A梦”时钟

Jul 24 Javascript

localStorage的黑科技-js和css缓存机制

Feb 06 Javascript

canvas 绘制圆形时钟

Feb 22 Javascript

全面解析jQuery中的$(window)与$(document)的用法区别

Aug 15 jQuery

React复制到剪贴板的示例代码

Aug 22 Javascript

详解微信小程序开发用户授权登陆

Apr 24 Javascript

浅谈vue权限管理实现及流程

Apr 23 Javascript

JS实现数组去重的11种方法总结

Apr 04 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图片处理之图片背景、画布操作

2014/11/19 PHP

php简单处理XML数据的方法示例

2017/05/19 PHP

Thinkphp5行为使用方法汇总

2017/12/21 PHP

PHP封装的验证码工具类定义与用法示例

2018/08/22 PHP

tp5框架的增删改查操作示例

2019/10/31 PHP

读jQuery之二（两种扩展）

2011/06/11 Javascript

查看源码的工具学习jQuery源码不错的工具

2011/12/26 Javascript

取消选中单选框radio的三种方式示例介绍

2013/12/23 Javascript

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

2015/06/08 Javascript

JavaScript实现ASC转汉字及汉字转ASC的方法

2016/01/23 Javascript

javascript-解决mongoose数据查询的异步操作

2016/12/22 Javascript

Vue过滤器的用法和自定义过滤器使用

2017/02/08 Javascript

微信小程序获取session_key和openid的实例

2017/08/17 Javascript

vue组件tabbar使用方法详解

2018/11/06 Javascript

Element Table的row-class-name无效与动态高亮显示选中行背景色

2018/11/30 Javascript

详解package.json版本号规则

2019/08/01 Javascript

解决Layui数据表格显示无数据提示的问题

2019/11/14 Javascript

vue-cli或vue项目利用HBuilder打包成移动端app操作

2020/07/29 Javascript

vue 扩展现有组件的操作

2020/08/14 Javascript

Django实现组合搜索的方法示例

2018/01/23 Python

使用python实现抓取腾讯视频所有电影的爬虫

2019/04/15 Python

python获取Linux发行版名称

2019/08/30 Python

一篇文章搞懂python的转义字符及用法

2020/09/03 Python

Python 使用SFTP和FTP实现对服务器的文件下载功能

2020/12/17 Python

HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例

2014/06/16 HTML / CSS

阿里巴巴的Oracle DBA笔试题答案-SQL tuning类

2016/04/03 面试题

求职推荐信范文

2013/12/01 职场文书

工商局所长四风自我剖析及整改措施

2014/10/26 职场文书

离婚协议书的范本

2015/01/27 职场文书

2015暑期爱心支教策划书

2015/07/14 职场文书

2016中秋节晚会开场白

2015/11/26 职场文书

2019求职信：应届生求职信范文

2019/04/24 职场文书

golang在GRPC中设置client的超时时间

2021/04/27 Golang

python 中的@运算符使用

2021/05/26 Python

winserver2019安装软件一直卡在应用程序正在为首次使用做准备

2022/06/10 Servers

Nginx文件已经存在全局反向代理问题排查记录

2022/07/15 Servers