window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); var gradient =context.createLinearGradient(100,100,100,200);
gradient.addColorStop(1,"blue"); // show blue at the bottom
gradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient;
context.fillRect(100,100,100,100);
};

window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); var gradient =context.createLinearGradient(100,100,100,200);
gradient.addColorStop(1,"blue"); // show blue at the bottom
gradient.addColorStop(0.75, "pink"); //close to the bottom
gradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient;
context.fillRect(100,100,100,100);
};

window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); var gradient =context.createLinearGradient(100,100,200,100);
gradient.addColorStop(1,"blue"); // show blue at the bottom
gradient.addColorStop(0.75, "pink"); //close to the bottom
gradient.addColorStop(0,"yellow"); // show yellow on the top context.fillStyle=gradient;
context.fillRect(100,100,100,100);
};

----------------------------

window.onload = function() {

    var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); var gradient = context.createRadialGradient(100,100,0,100,100,50);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black"); context.fillStyle = gradient;
context.beginPath();
context.arc(100,100,50,0,Math.PI * 2);
context.closePath();
context.fill(); };

var gradient = context.createRadialGradient(100,100,20,100,100,50);

var gradient = context.createRadialGradient(100,100,20,100,100,80);

var gradient = context.createRadialGradient(100,100,20,100,100,30);

var gradient = context.createRadialGradient(120,80,0,110,90,60);

[Javascript] Gradient Fills on the HTML5 Canvas的更多相关文章

  1. 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏(包含源码)

    这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animati ...

  2. 【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目

    //V1.0 : 实现棋子的布局,画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 :实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源 ...

  3. 惊艳!9个不可思议的 HTML5 Canvas 应用试验

    HTML5 <canvas> 元素给网页中的视觉展示带来了革命性的变化.Canvas 能够实现各种让人惊叹的视觉效果和高效的动画,在这以前是需要 Flash 支持或者 JavaScript ...

  4. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  5. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  6. 高性能动画!HTML5 Canvas JavaScript框架KineticJS

    高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...

  7. Bring Your Charts to Life with HTML5 Canvas and JavaScript

    Bring Your Charts to Life with HTML5 Canvas and JavaScript Bring Your Charts to Life with HTML5 Canv ...

  8. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  9. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

随机推荐

  1. easyui源码翻译1.32--Messager(消息窗口)

    前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...

  2. JMP软件中的晶圆图( Wafer Map)分析

    关键词:芯片 良率分析 晶圆图 质量管理 JMP Minitab 半导体芯片的生产,简单来讲,是将电路通过各种复杂的物理化学方法制作到晶圆上,在生产的最后阶段会进行不同电性功能的测试以确保产品的功能性 ...

  3. MySQL 性能调优的10个方法

    Mysql的优化方面,一般我们很少去考虑它,即使想到优化一般也更多是程序级别的,比如不要写过于消耗资源的SQL语句,但是除此以外,在整个系统上其实仍然有很多可以优化的地方. 1. 选择合适的存储引擎: ...

  4. matlab numpy equivalents

    THIS IS AN EVOLVING WIKI DOCUMENT. If you find an error, or can fill in an empty box, please fix it! ...

  5. 【HDOJ】4455 Substrings

    5000ms的时限,还挺长的.算法是DP.思路是找到ans[1..n]的结果,然后Query就容易做了.问题是怎么DP?考虑:1 1 2 3 4 4 5w=1: 7, 7 = 1 * 7w=2: 10 ...

  6. 【HDOJ】2102 A计划

    BFS,不过有很多地方需要注意,比如传送机传送到另一个传送机.还有要注意格式. #include <iostream> #include <cstdio> #include & ...

  7. hdu4662MU Puzzle

    http://acm.hdu.edu.cn/showproblem.php?pid=4662 I+3*U模6为2或4的都可以 一个U相当于3个I  而I只能1->2->4->8..如 ...

  8. jdbcTemplate 获取数据表结构

    jdbcTemplate 操作方法 /** *1.方法一: */ String sql = "select * from "+ tableName; //RowCountCallb ...

  9. WPF——菜单栏及TabControl

    一.先造一个窗体,然后在窗体里面增加菜单栏及原始的TabControl选项卡 <Grid> <Menu> <MenuItem Header="文件" ...

  10. C#如何获取真实IP地址

    大家获取用户IP地址常用的方法是   C# 代码   复制 string IpAddress = ""; if((HttpContext.Current.Request.Serve ...