代码实例：

<!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. php array_chunk()函数 语法

    php array_chunk()函数 语法 作用:把数组分割为新的数组块.dd马达参数 语法:array_chunk(array,size,preserve_key) 参数: 参数 描述 array ...

  2. 【Nacos】Nacos安装

    1.Nacos简介 Nacos是阿里巴巴集团开源的一个易于使用的平台,专为动态服务发现,配置和服务管理而设计.它可以帮助您轻松构建云本机应用程序和微服务平台. Nacos基本上支持现在所有类型的服务, ...

  3. 【进阶技术】一篇文章搞掂：Spring Cloud Stream

    本文总结自官方文档http://cloud.spring.io/spring-cloud-static/spring-cloud-stream/2.1.0.RC3/single/spring-clou ...

  4. TNS-12535

    Fatal NI connect error 12170. VERSION INFORMATION: TNS for Linux: Version 11.2.0.3.0 - Production Or ...

  5. ctcss

    CTCSS解码器基于非常窄的带通滤波器,其通过所需的CTCSS音调.滤波器的输出经过放大和整流,只要存在所需的音调,就会产生直流电压.直流电压用于打开,启用或取消静音接收器的扬声器音频级.当音调存在时 ...

  6. 五一清北学堂培训之数据结构（Day 1&Day 2）

    Day 1 前置知识: 二进制 2.基本语法 3.时间复杂度 正片       1.枚举 洛谷P1046陶陶摘苹果  入门题没什么好说的 判断素数:从2枚举到sqrt(n),若出现n的因子,则n是合数 ...

  7. redis centos集群搭建和java应用

    1. 首先要ssh免密登录 redis集群,3台虚拟机,6个节点,每台机器2个节点一主一从. 192.168.132.154 c0192.168.132.156 c1192.168.132.155 c ...

  8. 16/7/14-MySQL-关键字

    Mysql 关键字-保留字 转载:http://linux.it.net.cn/e/data/mysql/2014/1202/9460.html 时间:2014-12-02 13:09来源:linux ...

  9. SVG绘制随机的柱形图+php

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. poj2376Cleaning Shifts (贪心求解)

    描述 大表哥分配 N (1 <= N <= 25,000) 只中的一些奶牛在牛棚附近做些清洁. 他总是要让至少一只牛做清洁.他把一天分成T段(1 <= T <= 1,000,0 ...