代码实例：

<!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. linux运维、架构之路-数据库迁移

    一.wordpress搭建 1.wordpress下载部署 cd /server/tools/ wget https://cn.wordpress.org/wordpress-4.8.1-zh_CN. ...

  2. [CF1182F]Maximum Sine

    题意:\(f(x) = \text{abs}(\text{sin}(\frac{p}{q} \pi x))\),给定\(a,b,p,q\),求\(x\in[a,b]\)最大的\(f(x)\). 题解: ...

  3. 【HDOJ6699】Block Breaker（模拟）

    题意:给定一个n*m的网格块,如果一个块水平或垂直方向没有相邻支撑就会掉下去 有q次询问,每次会掉下去一块,问连锁反应新掉下的块数 n,m<=2e3,q<=1e5 思路: #include ...

  4. 基于ES6的tinyJquery

    原文地址:Bougie的博客 jQuery作为曾经Web前端的必备利器,随着MVVM框架的兴起,如今已稍显没落.但它操作DOM的便利性无出其右.我用ES6写了一个基于class简化版的jQuery,包 ...

  5. Windowed functions can only appear in the SELECT or ORDER BY clauses

    尝试做分页处理 select row_number over (orderby id asc) as rownum,* from table where rownum>=(@page*@page ...

  6. Bulk synchronous parallel

    https://en.wikipedia.org/wiki/Bulk_synchronous_parallel https://zh.wikipedia.org/wiki/整体同步计算模型 超级步(S ...

  7. 130、TensorFlow操作多个计算图

    # Programming with multiple graphs # 当训练一个模型的时候一个常用的方式就是使用一个图来训练你的模型 # 另一个图来评价和计算训练的效果 # 在许多情况下前向计算和 ...

  8. 题解[SCOI2009]粉刷匠 难度：省选/NOI-

    Description windy有 N 条木板需要被粉刷.每条木板被分为 M 个格子.每个格子要被刷成红色或蓝色.windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色.每个格子最多 ...

  9. Mac006--swithchosts安装

    Mac006--swithchosts安装 使用brew命令安装:brew cask install switchhosts 因为mac上,网络下载无法进行安装,所以应用brew命令安装. switc ...

  10. dp(最长升序列：二分查找时间优化nlogn)

    We are all familiar with sorting algorithms: quick sort, merge sort, heap sort, insertion sort, sele ...