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

文本框中,回车键触发事件的js代码[多浏览器兼容]

Jun 07 Javascript

JavaScript基础知识学习笔记

Dec 02 Javascript

javascript递归回溯法解八皇后问题

Apr 22 Javascript

JavaScript实现非常简单实用的下拉菜单效果

Aug 27 Javascript

基于Jquery实现万圣节快乐特效

Nov 01 Javascript

基于jQuery1.9版本如何判断浏览器版本类型

Jan 12 Javascript

JQuery EasyUI的使用

Feb 24 Javascript

JS在浏览器中解析Base64编码图像

Feb 09 Javascript

整理关于Bootstrap过渡动画的慕课笔记

Mar 29 Javascript

详解Vue用axios发送post请求自动set cookie

May 10 Javascript

JavaScript设计模式之职责链模式应用示例

Aug 07 Javascript

js array数组对象操作方法汇总

Mar 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下利用header()函数设置浏览器缓存的代码

2010/09/01 PHP

轻松掌握php设计模式之访问者模式

2016/09/23 PHP

php redis实现文章发布系统（用户投票系统）

2017/03/04 PHP

PHP基于Closure类创建匿名函数的方法详解

2017/08/17 PHP

PHP数组访问常用方法解析

2020/09/05 PHP

div移动输入框不能输入的问题

2009/11/19 Javascript

jQuery asp.net 用json格式返回自定义对象

2010/04/07 Javascript

Js操作Select大全(取值、设置选中等等)

2013/10/29 Javascript

常用的几段javascript代码分享

2014/03/25 Javascript

简介JavaScript中Math.LOG10E属性的使用

2015/06/14 Javascript

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

2015/11/17 Javascript

JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

2016/06/17 Javascript

javascript表单控件实例讲解

2016/09/13 Javascript

ionic 3.0+ 项目搭建运行环境的教程

2017/08/09 Javascript

为什么我们要做三份 Webpack 配置文件

2017/09/18 Javascript

electron demo项目npm install安装失败的解决方法

2018/02/06 Javascript

AngularJs分页插件使用详解

2018/06/30 Javascript

Vue源码中要const _toStr = Object.prototype.toString的原因分析

2018/12/09 Javascript

vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

2019/05/14 Javascript

详解如何提升JSON.stringify()的性能

2019/06/12 Javascript

微信小程序实现收货地址左滑删除

2020/11/18 Javascript

[05:46]2018完美盛典-《同梦共竞》

2018/12/17 DOTA

python正则表达式match和search用法实例

2015/03/26 Python

PyCharm 设置SciView工具窗口的方法

2019/01/15 Python

Python中的集合介绍

2019/01/28 Python

python+numpy实现的基本矩阵操作示例

2019/07/19 Python

django和vue实现数据交互的方法

2019/08/21 Python

keras之权重初始化方式

2020/05/21 Python

Debenhams爱尔兰：英国知名的百货公司

2017/01/02 全球购物

沃尔玛旗下墨西哥超市：Bodega Aurrera

2020/11/13 全球购物

初三家长会邀请函

2014/01/18 职场文书

简历中的自我评价怎么写

2014/01/29 职场文书

中学校庆方案

2014/03/17 职场文书

2014年信贷员工作总结

2014/11/18 职场文书

解决Python保存文件名太长OSError: [Errno 36] File name too long

2022/05/11 Python

sql注入报错之注入原理实例解析

2022/06/10 MySQL