编程 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 匿名函数的理解（透彻版)

Jan 28 Javascript

jquery创建并行对象或者合并对象的实现代码

Oct 10 Javascript

给ListBox添加双击事件示例代码

Dec 02 Javascript

javascript学习笔记（五）原型和原型链详解

Oct 08 Javascript

每天一篇javascript学习小结（Function对象）

Nov 16 Javascript

Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

Sep 28 Javascript

JavaScript SHA1加密算法实现详细代码

Oct 06 Javascript

JavaScript实现的微信二维码图片生成器的示例

Oct 26 Javascript

Angular 多模块项目构建过程

Feb 13 Javascript

详解elementUI中input框无法输入的问题

Apr 27 Javascript

简单了解常用的JavaScript 库

Jul 16 Javascript

Vue实现购物车基本功能

Nov 08 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 实现进制转换(二进制、八进制、十六进制）互相转换实现代码

2010/10/22 PHP

php引用地址改变变量值的问题

2012/03/23 PHP

windows7下安装php的php-ssh2扩展教程

2014/07/04 PHP

php文件读取方法实例分析

2015/06/20 PHP

PHP快速推送微信模板消息

2017/04/14 PHP

js动态添加表格数据使用insertRow和insertCell实现

2014/05/22 Javascript

js实现背景图片感应鼠标变化的方法

2015/02/28 Javascript

在JavaScript中正确引用bind方法的应用

2015/05/11 Javascript

JS模拟的Map类实现方法

2016/06/17 Javascript

canvas实现简易的圆环进度条效果

2017/02/28 Javascript

javascript闭包功能与用法实例分析

2017/04/06 Javascript

关于在vue-cli中使用微信自动登录和分享的实例

2017/06/22 Javascript

Javascript快速实现浏览器系统通知

2017/08/26 Javascript

js通过Date对象实现倒计时动画效果

2017/10/27 Javascript

基于axios封装fetch方法及调用实例

2018/02/05 Javascript

nodejs更改项目端口号的方法

2018/05/13 NodeJs

vue 监听某个div垂直滚动条下拉到底部的方法

2018/09/15 Javascript

NodeJS模块与ES6模块系统语法及注意点详解

2019/01/04 NodeJs

JSX在render函数中的应用详解

2019/09/04 Javascript

微信小程序工具函数封装

2019/10/28 Javascript

Js视频播放器插件Video.js使用方法详解

2020/02/04 Javascript

Python脚本在Appium库上对移动应用实现自动化测试

2015/04/17 Python

详解Python编程中基本的数学计算使用

2016/02/04 Python

Python连接DB2数据库

2016/08/27 Python

VSCode Python开发环境配置的详细步骤

2019/02/22 Python

Python 3.8新特征之asyncio REPL

2019/05/28 Python

利用selenium爬虫抓取数据的基础教程

2019/06/10 Python

一张图片能隐含千言万语之隐藏你的程序代码

2012/12/13 HTML / CSS

西班牙美妆电商：Perfume’s Club（有中文站）

2018/08/08 全球购物

俄罗斯连接商品和买家的在线平台：goods.ru

2020/11/30 全球购物

精彩的英文自荐信

2014/01/30 职场文书

《小草和大树》教学反思

2014/02/16 职场文书

亲子读书活动方案

2014/02/22 职场文书

转变工作作风心得体会

2016/01/23 职场文书

祝福语集锦：朋友新店开业祝福语

2019/12/10 职场文书

Java图书管理系统,课程设计必用(源码+文档)

2021/06/30 Java/Android