代码实例：

<!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. 重新定义数据库的时刻，阿里云数据库专家带你了解POLARDB

    摘要:POLARDB是阿里云ApsaraDB数据库团队研发的基于云计算架构的下一代关系型数据库,其最大的特色是计算节点与存储节点分离,借助优秀的RDMA网络以及最新的块存储技术.POLARDB不但满足 ...

  2. Linux内核设计与实现 总结笔记（第二章）

    一.Linux内核中的一些基本概念 内核空间:内核可独立于普通应用程序,它一般处于系统态,拥有受保护的内存空间和访问硬件设备的所有权限.这种系统态和被保护起来的内存空间,称为内核空间. 进程上下文:当 ...

  3. 牛客多校第一场 Random Point in Triangle

    https://ac.nowcoder.com/acm/contest/881/F 打表代码: #include<bits/stdc++.h> using namespace std; ] ...

  4. spring boot中注册拦截器

    拦截器是动态拦截Action调用的对象.它提供了一种机制可以使开发者可以定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行,同时也提供了一种可以提取action中可重 ...

  5. mysql主从架构，IO、SQL线程运行为YES，从库没有同步数据

    mysql基于binlog主从复制架构,IO.SQL线程运行为YES,从库没有同步数据 Slave_IO_Running: Yes Slave_SQL_Running: Yes Replicate_D ...

  6. day06—JavaScript之闭包

    转行学开发,代码100天——2018-03-22 第一次听说“闭包”这个词,还是在2015年某个深夜在听一节腾讯课堂的公开课上,当时老师讲什么已经没有清晰的记忆了,只知道是一次web的开发课程. 过了 ...

  7. 用C#调用C++DLL提示找不到DLL解决方法【转】

    用C#调用自己写的C++ DLL(x64),总是提示找不到DLL,调试可以,发布release老是提示找不到DLL(dll文件确定存在) 原因:Visual C++的DLL分发方式没选:调试默认选择: ...

  8. Fedora 的截屏功能

    写写博客少不了截图,Windows 上使用微信的快捷键 Ctrl+A 截图并且可以随意编辑是挺方便的,开始在 Linux 上还没有找到这样的软件,只找到了不支持编辑的简单截图软件. 1. 使用 Scr ...

  9. 【MM系列】SAP SAP的账期分析和操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP SAP的账期分析和操作   ...

  10. package和import语句_5

    J2SDK中主要的包介绍   java.lang—包含一些Java语言的核心类,如String.Math.Integer.System和 Thread,提供常用功能. java.awt—包含了构成抽象 ...