编程 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使用手册之二 DOM操作

Mar 24 Javascript

getElementById在任意一款浏览器中都可以用吗的疑问回复

May 13 Javascript

javascript dom 操作详解 js加强

Jul 13 Javascript

js操作select控件的几种方法

Jun 02 Javascript

PHP 与 js的通信（via ajax,json）

Nov 16 Javascript

js中更短的 Array 类型转换

Oct 30 Javascript

用Mootools获得操作索引的两种方法分享

Dec 12 Javascript

js获取当前时间显示在页面上并每秒刷新

Dec 24 Javascript

jQuery的context属性用法实例

Dec 27 Javascript

JS实现同一个网页布局滑动门和TAB选项卡实例

Sep 23 Javascript

Layui实现数据表格默认全部显示(不要分页)

Oct 26 Javascript

解决新建一个vue项目过程中遇到的问题

Oct 22 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中常量,变量的作用域和生存周期

2013/08/10 PHP

如何修改Laravel中url()函数生成URL的根地址

2017/08/11 PHP

ThinkPHP中图片按比例切割的代码实例

2019/03/08 PHP

jquery中的$(document).ready()与window.onload的区别

2009/11/18 Javascript

一个收集图片的bookmarlet(js 刷新页面中的图片)

2010/05/27 Javascript

19个很有用的 JavaScript库推荐

2011/06/27 Javascript

jquery获取tagName再进行判断

2014/05/29 Javascript

seajs加载jquery时提示$ is not a function该怎么解决

2015/10/23 Javascript

AngularJs Forms详解及简单示例

2016/09/01 Javascript

详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

2017/05/22 Javascript

NW.js 简介与使用方法

2018/02/01 Javascript

浅谈在vue中使用mint-ui swipe遇到的问题

2018/09/27 Javascript

vue 右键菜单插件简单、可扩展、样式自定义的右键菜单

2018/11/29 Javascript

详解vue项目中调用百度地图API使用方法

2019/04/25 Javascript

vue 使用 vue-pdf 实现pdf在线预览的示例代码

2020/04/26 Javascript

vue大型项目之分模块运行/打包的实现

2020/09/21 Javascript

web.py获取上传文件名的正确方法

2014/08/26 Python

python中WSGI是什么，Python应用WSGI详解

2017/11/24 Python

Python 读取指定文件夹下的所有图像方法

2018/04/27 Python

Flask入门之上传文件到服务器的方法示例

2018/07/18 Python

树莓派4B+opencv4+python 打开摄像头的实现方法

2019/10/18 Python

python3 assert 断言的使用详解 (区别于python2)

2019/11/27 Python

python pycharm最新版本激活码(永久有效)附python安装教程

2020/09/18 Python

Python获取对象属性的几种方式小结

2020/03/12 Python

Python 忽略文件名编码的方法

2020/08/01 Python

vue.js刷新当前页面的实例讲解

2020/12/29 Python

DERMAdoctor官网：美国著名皮肤护理品牌

2019/07/06 全球购物

项目计划书范文

2014/01/09 职场文书

奠基仪式主持词

2014/03/20 职场文书

高等教育学专业自荐书

2014/06/17 职场文书

运动员获奖感言

2014/08/15 职场文书

幼儿园大班毕业评语

2014/12/31 职场文书

优秀教师工作总结2015

2015/07/22 职场文书

班主任经验交流心得体会

2015/11/02 职场文书

nginx请求限制配置方法

2021/07/09 Servers