代码实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实例</title>

    <script>

        window.onload=function() {

               var canvas=document.getElementById('canvas');

               var ctx=canvas.getContext('2d');

               //渐变的位置

                var colorObj=ctx.createLinearGradient(0,0,100,0);

                //颜色的变化

                colorObj.addColorStop(0,"blue");

                colorObj.addColorStop(1,"green");

                ctx.fillStyle= colorObj;

                 ctx.fillRect(0,0,100,100);

        ctx.putImageData(imgData,0,0);

        }

    </script>

</head>

<body>

<canvas  id="canvas" width="500"  height="500"></canvas>

</body>

</html>

　　效果：

2017-09-12    09:51:31

html5 实例渐变的更多相关文章

  1. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

  2. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  3. （转）HTML5之渐变

    <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h ...

  4. html5实例-闪烁的星星

    一.绘制五角星 1.1页面结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  5. HTML5颜色渐变3D文字特效

    在线演示 本地下载

  6. HTML5新特性及详解

    什么是HTML5:HTML5 是下一代的HTML,将成为 HTML.XHTML 以及 HTML DOM 的新标准. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 J ...

  7. html5 基本内容 摘自W3C

    HTML5 教程(摘录自 W3C School) HTML 5 简介(HTML5 是下一代的 HTML) 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标 ...

  8. HTML5 学习笔记 1

    1.音频.视频 <!DOCTYPE HTML> <html> <body> <audio controls="controls"> ...

  9. HTML5 总结-画布-4

    HTML5 画布 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" wid ...

随机推荐

  1. POJ 3259 Wormholes ( SPFA判断负环 && 思维 )

    题意 : 给出 N 个点,以及 M 条双向路,每一条路的权值代表你在这条路上到达终点需要那么时间,接下来给出 W 个虫洞,虫洞给出的形式为 A B C 代表能将你从 A 送到 B 点,并且回到 C 个 ...

  2. zabbix4.0 percona插件实现监控mysql

    percona是一款能够详细监控zabbix MySQL的插件 官方下载percona插件 wget https://www.percona.com/downloads/percona-monitor ...

  3. 检测代理IP匿名程度的方法，很实用

    做网络的基本都知道代理,这个是肯定的,不管是用花刺还是猎手的网页代理,还是直接VPN的通道代理,代理有着不用说大家也知道的重要性.不管是做CPA还是做点击亦或者投票,代理都能帮我们一下,虽然帮的忙不大 ...

  4. 20180820-Java 抽象类

    Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...

  5. [CSP-S模拟测试92]题解

    A.数列 显然每个数的答案是互相独立的,直接扩欧求解.我们需要最小化$ax+by=gcd(a,b)$中的$|x|+|y|$,而显然当x或y靠近0时答案可能最优,列个不等式求一下即可. 能$O(1)$千 ...

  6. 分页框架pager-taglib学习笔记

    说到分页其实可以研究一下我自己项目里面的分页框架的使用. 下面的笔记来自于孔浩老师的视频教程和我自己的开发实践. 使用Pager-taglib可以帮助我们快速开发分页处理. 下载:pager-tagl ...

  7. 如何利用阿里视频云开源组件，快速自定义你的H5播放器？

    摘要: Aliplayer希望提供一种方便.简单.灵活的机制,让客户能够扩展播放器的功能,并且Aliplayer提供一些组件的基本实现,用户可以基于这些开源的组件实现个性化功能,比如自定义UI和自己A ...

  8. hook原生打包流程

    将实际执行的Transform换成了MatrixTraceTransform public static void inject(Project project, def variant) { //获 ...

  9. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

  10. CSU 1556 Jerry's trouble

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1556 Description Jerry is caught by Tom. He ...