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. asp.net将数据库中的数据赋给DropDownList

    当你选定一项进行其他操作时会重新绑定dropdownlist,这样会重新回到第一项,在page_load里加上判断if(!IsPostBack){'这里是你需要绑定dropdownlist的代码'}. ...

  2. 带你走进EJB--MDB实现发送邮件(3)

    接上篇,在业务逻辑中已经发送JMS消息,而接下来的消息驱动Bean作为JMS消息监听器,主要是负责监听指定的JMS消息,此时已经接受到JMS的消息,那么MDB的onMessage()方法会被触发.调用 ...

  3. poj2723

    把每对钥匙看做一个变量,那两个钥匙看做他的两个状态 每一个开门的要求就是一个条件(xi or xj) 很显然有了2sat的基本要素 2sat是一个判定性问题,而这题求最多能过几个门: 不难想到二分答案 ...

  4. EF双向一对一中的坑

    EF版本 6.0 在项目中双向一对一关系是普遍存在的,如果不仔细检查,并不容易发现这个坑 下面新建两个类(假设这两个类是一对一的关系)对应实体都设置为可延迟加载 映射关系为: 再建一个数据访问类: 运 ...

  5. [swustoj 411] 售货员的难题

    售货员的难题(0411) Time limit(ms): 5000 Memory limit(kb): 65535 Submission: 1744 Accepted: 200 Description ...

  6. [swustoj 764] 校门外的树 Plus Plus

    校门外的树 Plus Plus(0764) 问题描述 西南某科技大学的校门外长度为 L 的公路上有一排树,每两棵相邻的树之间的间隔都是 1 米.我们可以把马路看成一个数轴,马路的一端在数轴 1 的位置 ...

  7. diamond专题(四)—— 容灾机制

    大家好,本次为大家带来diamond的容灾机制. diamond之所以表现的稳定可靠,除了架构简单之外,另一个重要原因是diamond具有一套完备的容灾机制,容灾机制涉及到client和server两 ...

  8. 数组MARSHALLING z

    在托管代码和本地代码之间传递数组,是interop marshaling中间比较复杂的一个问题.本文从数组的定义开始,介绍数组marshalling的三种方法,并对blittable类型等概念做进一步 ...

  9. Curl之Post Json

    curl Post Json $ curl -i -X POST -H "'Content-type':'application/x-www-form-urlencoded', 'chars ...

  10. VS2013 单元测试(使用VS2013自带的单元测试)

    本文是官方文档的学习笔记,官方文档在这里. 1.打开VS3013,随便建一个解决方案,比如叫:LearnUnitTest,建一个类库项目LearnUnitTest_Bank,该项目中添加一个BankA ...