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程序设计有所帮助。

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