编程 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 相关文章推荐

JavaScript中令你抓狂的魔术变量

Nov 30 Javascript

在你的网页中嵌入外部网页的方法

Apr 02 Javascript

JavaScript 学习初步入门教程

Mar 25 Javascript

使用jquery插件实现图片延迟加载技术详细说明

Mar 12 Javascript

js中定义一个变量并判断其是否为空的方法

May 13 Javascript

轻松掌握JavaScript代理模式

Aug 26 Javascript

微信小程序数组（增，删，改，查）等操作实例详解

Jan 05 Javascript

微信小程序新建登录页并实现tabBar隐藏

Jun 13 Javascript

如何从0开始用node写一个自己的命令行程序

Dec 29 Javascript

JavaScript常用工具方法封装

Feb 12 Javascript

前端天气插件tpwidget使用方法详解

Jun 24 Javascript

vue引入Excel表格插件的方法

Apr 28 Vue.js

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的call_user_func传reference引发的思考

2010/07/23 PHP

用C/C++扩展你的PHP 为你的php增加功能

2012/09/06 PHP

php中使用redis队列操作实例代码

2013/02/07 PHP

基于php split()函数的用法详解

2013/06/05 PHP

php字符串分割函数用法实例

2015/03/17 PHP

PHP也能干大事之PHP中的编码解码详解

2015/04/20 PHP

变量在 PHP7 内部的实现（一）

2015/12/21 PHP

PHP array_reduce()函数的应用解析

2018/10/28 PHP

extjs 列表框(multiselect)的动态添加列表项的方法

2009/07/31 Javascript

JavaScript设置、获取、清除单值和多值cookie的方法

2015/11/17 Javascript

js实现延时加载Flash的方法

2015/11/26 Javascript

js removeChild 方法深入理解

2016/08/16 Javascript

AngularJS的ng-repeat指令与scope继承关系实例详解

2017/01/21 Javascript

js实现无缝滚动图（可控制当前滚动的方向）

2017/02/22 Javascript

微信小程序之购物车功能

2020/09/23 Javascript

bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

2017/05/25 Javascript

详解Node全局变量global模块

2017/09/28 Javascript

element-ui 表格数据时间格式化的方法

2018/08/24 Javascript

微信小程序云开发实现云数据库读写权限

2019/05/17 Javascript

vue-cli基础配置及webpack配置修改的完整步骤

2019/10/20 Javascript

JavaScript享元模式原理与用法实例详解

2020/03/09 Javascript

Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

2020/09/04 Javascript

python 用for循环实现1~n求和的实例

2019/02/01 Python

Python concurrent.futures模块使用实例

2019/12/24 Python

快速解决jupyter启动卡死的问题

2020/04/10 Python

Python实现邮件发送的详细设置方法(遇到问题)

2021/01/18 Python

宝拉珍选英国官网：Paula’s Choice英国

2019/05/29 全球购物

英国户外服装、鞋类和设备的领先零售商：Millets

2020/10/12 全球购物

高二化学教学反思

2014/01/30 职场文书

大学军训感言1000字

2014/02/25 职场文书

党员学习党的群众路线思想汇报（5篇）

2014/09/10 职场文书

群众路线自查报告及整改措施

2014/11/04 职场文书

2014年度个人工作总结

2014/11/07 职场文书

世界卫生日宣传活动总结

2015/02/09 职场文书

python 多态协议鸭子类型详解

2021/11/27 Python

MySQL实战记录之如何快速定位慢SQL

2022/03/23 MySQL