代码实例：

<!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. Influxdb根据配置文件启动（Influxdb的数据存储）

    1.在Influxdb文件夹下建立一个bat文件 2.文件内容如下: @echo offSETLOCAL :: 获取当前批处理所在路径SET InfluxdP==%~dp0 :: 开启influxdb ...

  2. 2，ArrayList

    一,ArrayList简介 1,ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长. 2,ArrayList 继承了AbstractList,实现了List ...

  3. C# 与 C++，语法差别有多小-其他2

    1. 内存分配 C++:指针在堆区(new),定义在栈区 C#:  对象在堆区,值在栈区.不允许不通过new在构造对象 2.变量 C++: char 1个字节 ascii C#:   char 2个字 ...

  4. C# 常用的ToString("xxxx")

    Convert.ToDecimal("-123").ToString("#,#.##") 结果:-123 Convert.ToDecimal("-12 ...

  5. 【CF1243B2】Character Swap (Hard Version)【思维】

    题意:给定两个字符串,问是否存在交换方案使得两个字符串相同,方案为交换次数小于等于2n,且每次只交换s1与s2中的一个字符 题解:考虑从前往后枚举,当第i位不同时,考虑找后边的第j位,若存在这样的第j ...

  6. 【HDOJ6667】Roundgod and Milk Tea（模拟）

    题意:有n个班级,每个班级有a[i]个人,b[i]杯奶茶 每个人至多喝一杯奶茶,且不能喝自己班的 问能喝到奶茶的最多总人数 n<=1e6,a[i],b[i]<=1e9 思路: 做法一: # ...

  7. Oracle DB 查看预警日志

    “Database(数据库)”主页>“Related Links相关链接)”区域> “Alert Log Content (预警日志内容)” 查看预警日志每个数据库都有一个alert_&l ...

  8. 2019 上海网络赛 J stone name (01背包)

    题目:https://nanti.jisuanke.com/t/41420 题意:给你一个集合,然后让你拆成两个集合 x,y    求满足  x>y  &&  x-(x集合中最小 ...

  9. pycharm默认的模板修改python script

    #!/usr/bin/env python # encoding: utf-8 #set( $SITE = "https://www.cnblogs.com/c-x-a" ) &q ...

  10. linux中awk 详解

    一.awk简介 awk是一个非常好用的数据处理工具,相对于sed常常作用于一整个行的处理,awk则比较倾向于一行当中分成数个[字段]处理,因此,awk相当适合处理小型的数据数据处理.awk是一种报表生 ...