编程 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 24 Javascript

passwordStrength 基于jquery的密码强度检测代码使用介绍

Oct 08 Javascript

JS随机生成不重复数据的实例方法

Jul 17 Javascript

js实现在字符串中提取数字

Nov 05 Javascript

从数组中随机取x条不重复数据的JS代码

Dec 24 Javascript

IE中JS跳转丢失referrer问题的2个解决方法

Jul 18 Javascript

JavaScript使用encodeURI()和decodeURI()获取字符串值的方法

Aug 04 Javascript

浅谈Angularjs link和compile的使用区别

Oct 21 Javascript

JS实现iframe自适应高度的方法示例

Jan 07 Javascript

Angular2使用jQuery的方法教程

May 28 jQuery

vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

Aug 24 Javascript

解决ant Design Search无法输入内容的问题

Oct 29 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

谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像！

2020/03/06 日漫

php 分库分表hash算法

2009/11/12 PHP

phpstudy2018升级MySQL5.5为5.7教程(图文)

2018/10/24 PHP

PHP使用openssl扩展实现加解密方法示例

2020/02/20 PHP

用JavaScript实现仿Windows关机效果

2007/03/10 Javascript

JavaScript Event事件学习第一章 Event介绍

2010/02/07 Javascript

javascript 嵌套的函数（作用域链）

2010/03/15 Javascript

js调用webservice中的方法实现思路及代码

2013/02/25 Javascript

javascript ie6兼容position:fixed实现思路

2013/04/01 Javascript

jquery 触发a链接点击事件解决方案

2013/05/02 Javascript

jquery sortable的拖动方法示例详解

2014/01/16 Javascript

js冒泡、捕获事件及阻止冒泡方法详细总结

2014/05/08 Javascript

jquery validate demo 基础

2015/10/29 Javascript

vue之浏览器存储方法封装实例

2018/03/15 Javascript

Vue下滚动到页面底部无限加载数据的示例代码

2018/04/22 Javascript

jQuery创建及操作xml格式数据示例

2018/05/26 jQuery

vue项目中添加单元测试的方法

2018/07/21 Javascript

AngularJS $http post 传递参数数据的方法

2018/10/09 Javascript

Vue 之孙组件向爷组件通信的实现

2019/04/23 Javascript

layui 实现表格某一列显示图标

2019/09/19 Javascript

Vue中inheritAttrs的使用实例详解

2020/12/31 Vue.js

[00:35]可解锁地面特效

2018/12/20 DOTA

[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08

2020/11/11 DOTA

使用Python编写Linux系统守护进程实例

2015/02/03 Python

flask使用session保存登录状态及拦截未登录请求代码

2018/01/19 Python

python使用pandas实现数据分割实例代码

2018/01/25 Python

python实现随机漫步算法

2018/08/27 Python

Python 实现顺序高斯消元法示例

2019/12/09 Python

Python如何实现在字符串里嵌入双引号或者单引号

2020/03/02 Python

html5应用缓存_动力节点Java学院整理

2017/07/13 HTML / CSS

2015年小学生新年寄语

2014/12/08 职场文书

英语教师求职信范文

2015/03/20 职场文书

反腐倡廉心得体会2016

2016/01/13 职场文书

学校团代会开幕词

2016/03/04 职场文书

八年级地理课件资料及考点知识分享

2019/08/30 职场文书

Golang流模式之grpc的四种数据流

2022/04/13 Golang