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. 轻松使用Nginx搭建web服务器

    如果读者以前做过web开发的话,就应该知道如何去搭建一个web服务器来跑你的web站点,在windows下你可能会选择去用IIS,十分的快捷,在linux下,你可能首先会想到apache,“一哥”( ...

  2. 调试Android USB遇到的令人费解的问题

    上周参照网上代码,做了USB的初步探测程序,工作正常 .今天从硬件部拿到了一段例程,原本打算参考它来完善自己的程序.但运行之后总是报错,逐步跟进错误,进而发现了一个匪疑所思的问题.调试一天也未发现原因 ...

  3. VC常用数据类型使用转换

    我们先定义一些常见类型变量借以说明 int i = 100; long l = 2001; float f=300.2; double d=12345.119; char username[]=&qu ...

  4. [Hadoop源码解读](四)MapReduce篇之Counter相关类

    当我们定义一个Counter时,我们首先要定义一枚举类型: public static enum MY_COUNTER{ CORRUPTED_DATA_COUNTER, NORMAL_DATA_COU ...

  5. BZOJ2741: 【FOTILE模拟赛】L

    2741: [FOTILE模拟赛]L Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 1170  Solved: 303[Submit][Status] ...

  6. android webview 访问https页面 SslError 处理

    在Android中,WebView可以用来加载http和https网页到本地应用的控件.但是在默认情况下,通过loadUrl(String url)方法,可以顺利loadUrl(“http://www ...

  7. Linux下的iwpriv(iwlist、iwconfig)的简单应用

    无线网络飞速发展的今天,许多设备都提供了连接无线网络的功能. 那么Linux下的wifi到底该怎么配置.连接呢?? 开始配置之前,我们要说说iw家族.iw是linux下常用的wifi配置工具,网上有相 ...

  8. LightOJ 1074 Extended Traffic SPFA 消负环

    分析:一看就是求最短路,然后用dij,果断错了一发,发现是3次方,有可能会出现负环 然后用spfa判负环,然后标记负环所有可达的点,被标记的点答案都是“?” #include<cstdio> ...

  9. apache学习

    核心功能和多路处理模块: Core:apache HTTP服务器核心提供的功能,始终有效 Mpm_common:收集了被多个多路处理模块(MPM)实现的公共指令 其他普通模块: mod_actions ...

  10. Java&MySQL Type Mapping

    MySQL Type Name Return value of GetColumnClassName Returned as Java Class BIT(1) (new in MySQL-5.0) ...