代码实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>实例</title>
  6.     <script>
  7.         window.onload=function() {
  8.                var canvas=document.getElementById('canvas');
  9.                var ctx=canvas.getContext('2d');
  10.                //渐变的位置
  11.                 var colorObj=ctx.createLinearGradient(0,0,100,0);
  12.                 //颜色的变化
  13.                 colorObj.addColorStop(0,"blue");
  14.                 colorObj.addColorStop(1,"green");
  15.                 ctx.fillStyle= colorObj;
  16.                  ctx.fillRect(0,0,100,100);
  17.  
  18.         ctx.putImageData(imgData,0,0);
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23. <canvas  id="canvas" width="500"  height="500"></canvas>
  24. </body>
  25. </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. Flutter中的浮动按钮 FloatingActionButton

    FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 . 常用属性 FloatingActionButton的常用属性,同flutte ...

  2. 笨办法学Python（learn python the hard way）--练习程序21-30

    下面是练习21-30,基于python3 #ex21.py 1 def add(a, b): print("ADDING %d + %d" %(a, b)) return a+b ...

  3. OSI参考模型和网络排错

     OSI七层协议 应用层  应用程序通信服务 表示层  显示  加密  数据格式 会话层   服务器和客户机建立会话  netstat -nb 查看会话   mscofig 传输层 可靠回话传输 分段 ...

  4. HashMap与HashTable的哈希算法——JDK1.9源码阅读总结

    下面是HashTable源码中的put方法: 注意上面注释标注的地方: HashTable对于元素在哈希表中的坐标算法是: 将对象自身的哈希值key.hashCode()变为正数:hash & ...

  5. javascript-object对象属性操作之Object.defineProperty

    一.基本用法简介 声明一个简单的对象,如下 var obj = { name: 'ldld' } 我们可以用Object.defineProperty来声明这个对象 var obj = {} Obje ...

  6. 007-TreeMap、Map和Bean互转、BeanUtils.copyProperties(A,B)拷贝、URL编码解码、字符串补齐，随机字母数字串

    一.转换 1.1.TreeMap 有序Map 无序有序转换 使用默认构造方法: public TreeMap(Map<? extends K, ? extends V> m) 1.2.Ma ...

  7. String中的CompareTo

    在API源码中,String的compareTo其实就是一次比较两个字符串的ASCII码.如果两个字符串的ASCII相等则继续后续比较,否则直接返回两个ASCII的差值.如果两个字符串完全一样,则返回 ...

  8. Golang通过反射获取结构体的标签

    Golang通过反射获取结构体的标签 例子: package main import ( "fmt" "reflect" ) type resume struc ...

  9. 20190823 尚硅谷MySQL核心技术

    背景 视频时间:2017.09 MySQL版本:5.5 MySQL基础 命令行启动.停止MySQL: net start MySQL(这里是注册的服务名称) net stop MySQL 命令行连接M ...

  10. SQL的一对多,多对一，一对一，多对多

    1.一对多:比如说一个班级有很多学生,可是这个班级只有一个班主任.在这个班级中随便找一个人,就会知道他们的班主任是谁:知道了这个班主任就会知道有哪几个学生.这里班主任和学生的关系就是一对多. 2.多对 ...