编程 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命名冲突解决的五种方案分享

Mar 16 Javascript

根据IP的地址，区分不同的地区，查看不同的网站页面的js代码

Feb 26 Javascript

EXTjs4.0的store的findRecord的BUG演示代码

Jun 08 Javascript

JavaScript加强之自定义callback示例

Sep 21 Javascript

javascript中bind函数的作用实例介绍

Sep 28 Javascript

jQuery实现瀑布流布局

Dec 12 Javascript

使用JQuery实现的分页插件分享

Nov 05 Javascript

JavaScript瀑布流布局实现代码

May 06 Javascript

再谈Angular4 脏值检测(性能优化)

Apr 23 Javascript

详解性能更优越的小程序图片懒加载方式

Jul 18 Javascript

Vue 组件注册实例详解

Feb 23 Javascript

vue+axios全局添加请求头和参数操作

Jul 24 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 数组的合并、拆分、区别取值函数集

2010/02/15 PHP

PHP缩略图等比例无损压缩，可填充空白区域补充色

2011/06/10 PHP

php实例分享之mysql数据备份

2014/05/19 PHP

使用symfony命令创建项目的方法

2016/03/17 PHP

PHP获取当前执行php文件名的代码

2017/03/02 PHP

php+mysql+jquery实现简易的检索自动补全提示功能

2017/04/15 PHP

PHP PDOStatement::bindValue讲解

2019/01/30 PHP

js去除空格的12种实用方法

2013/11/08 Javascript

js中settimeout方法加参数

2014/02/28 Javascript

JavaScript中的console.time()函数详细介绍

2014/12/29 Javascript

jQuery过滤特殊字符及JS字符串转为数字

2016/05/26 Javascript

微信小程序天气预报开发实例代码源码

2017/01/20 Javascript

JavaScript条件判断_动力节点Java学院整理

2017/06/26 Javascript

使用Vuex实现一个笔记应用的方法

2018/03/13 Javascript

使用Angular CLI进行单元测试和E2E测试的方法

2018/03/24 Javascript

vue+element导航栏高亮显示的解决方式

2019/11/12 Javascript

解决vue自定义全局消息框组件问题

2019/11/22 Javascript

Angular6项目打包优化的实现方法

2019/12/15 Javascript

JavaScript实现轮播图片完整代码

2020/03/07 Javascript

jquery html添加元素/删除元素操作实例详解

2020/05/20 jQuery

vue移动端弹起蒙层滑动禁止底部滑动操作

2020/07/22 Javascript

详解python调用cmd命令三种方法

2019/07/08 Python

PIL图像处理模块paste方法简单使用详解

2019/07/17 Python

python构造函数init实例方法解析

2020/01/19 Python

canvas绘制表情包的示例代码

2018/07/09 HTML / CSS

GNC健安喜美国官网：美国第一营养品牌

2016/07/22 全球购物

俄语专业毕业生推荐信

2013/10/28 职场文书

物流专业大学生职业生涯规划书范文

2014/01/15 职场文书

空乘英文求职信

2014/04/13 职场文书

学校爱心捐款倡议书

2014/05/13 职场文书

司法建议书范文

2014/05/13 职场文书

化学教育专业自荐信

2014/07/04 职场文书

幼儿园法制宣传日活动总结

2014/11/01 职场文书

CSS预处理框架——Stylus

2021/04/21 HTML / CSS

Python基础之pandas数据合并

2021/04/27 Python

解决Springboot PostMapping无法获取数据的问题

2022/05/06 Java/Android