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

获取客户端网卡MAC地址和IP地址实现JS代码

Mar 17 Javascript

IE6下javasc#ipt:void(0) 无效的解决方法

Dec 23 Javascript

用js来刷新当前页面保留参数的具体实现

Dec 23 Javascript

jquery常用函数与方法汇总

Sep 01 Javascript

使用contextMenu插件实现Bootstrap table弹出右键菜单

Feb 20 Javascript

vue组件name的作用小结

May 23 Javascript

javascript将非数值转换为数值

Sep 13 Javascript

在js代码拼接dom对象到页面上的模板总结

Oct 21 Javascript

Vue中jsx不完全应用指南小结

Nov 01 Javascript

vue项目中监听手机物理返回键的实现

Jan 18 Javascript

理解Proxy及使用Proxy实现vue数据双向绑定操作

Jul 18 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+SQL 注入攻击的技术实现以及预防办法

2011/01/27 PHP

输入值/表单提交参数过滤有效防止sql注入的方法

2013/12/25 PHP

ThinkPHP CURD方法之data方法详解

2014/06/18 PHP

js滚动条回到顶部的代码

2011/12/06 Javascript

JavaScript中函数声明优先于变量声明的实例分析

2012/03/01 Javascript

得到form下的所有的input的js代码

2013/11/07 Javascript

jquery网页回到顶部效果(图标渐隐,自写)

2014/06/16 Javascript

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

2016/01/23 Javascript

大型JavaScript应用程序架构设计模式

2016/06/29 Javascript

jQuery插件简单学习实例教程

2016/07/01 Javascript

基于Bootstrap的Metronic框架实现页面链接收藏夹功能

2016/08/29 Javascript

tab栏切换原理

2017/03/22 Javascript

深入讲解xhr（XMLHttpRequest）/jsonp请求之abort

2017/07/26 Javascript

浅谈Vue组件及组件的注册方法

2018/08/24 Javascript

简单说说angular.json文件的使用

2018/10/29 Javascript

React通过redux-persist持久化数据存储的方法示例

2019/02/14 Javascript

nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error

2019/03/02 NodeJs

微信小程序云开发之使用云数据库

2019/05/17 Javascript

微信小程序wepy框架学习和使用心得详解

2019/05/24 Javascript

在vue-cli中引入lodash.js并使用详解

2019/11/13 Javascript

JS数组的常用10种方法详解

2020/05/08 Javascript

原生JS实现微信通讯录

2020/06/18 Javascript

nodejs+express最简易的连接数据库的方法

2020/12/23 NodeJs

[04:31]2016国际邀请赛中国区预选赛妖精采访

2016/06/27 DOTA

[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21

2020/11/24 DOTA

Python装饰器decorator用法实例

2014/11/10 Python

ubuntu安装mysql pycharm sublime

2018/02/20 Python

用Python分析3天破10亿的《我不是药神》到底神在哪?

2018/07/12 Python

Flask框架 CSRF 保护实现方法详解

2019/10/30 Python

python pyenv多版本管理工具的使用

2019/12/23 Python

T3官网：头发造型工具

2019/12/26 全球购物

新学期决心书

2014/03/11 职场文书

信访维稳工作汇报

2014/10/27 职场文书

2015年科协工作总结

2015/05/19 职场文书

大学生读书笔记大全

2015/07/01 职场文书

python实现简单反弹球游戏

2021/04/12 Python