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. activiti集成spring异常(DbSqlSession)

    在eclipse配置一个简单的activiti项目,配置的是mysql数据库,报错如下: SLF4J: Failed to load class "org.slf4j.impl.Static ...

  2. 如何登录mysql? cmd怎么连接mysql数据库

    Mysql开源数据库,任何人都可以下载安装使用.那么安装好的mysql如何登陆连接mysql数据库呢? 连接mysql数据库的几种方法 一 Mysql命令行连接 一般对于刚刚安装好的mysql,如果勾 ...

  3. easyui表单提交,后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  4. LINUX下安装PHP(CGI模式)和NGINX[转]

    安装所需依赖 yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freety ...

  5. 第一章 USB Type C的基本原理

    图 1: USB Type C接头外形 USB Type C(简称USB-C)的基本特性: 1. 接口插座的尺寸与原来的Micro USB规格一样小,约为8.3mm X 2.5mm 2. 可承受1万次 ...

  6. Altium自定义的快捷键设置

    我想要在AD09里面设置自定义的快捷键,例如将布线设置成键盘上的字母E键,如何设置求大神指点!感激不尽!!! 为什么快捷键都要发一篇文章呢?主要是AD换层的快捷键是*号,与其他快捷键离的很远,一个AD ...

  7. dom操作之开关灯

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  8. MVC——数据库增删改查(Razor)——Html语法

    一.显示界面 .Models(模板) private MyDBDataContext _context = new MyDBDataContext(); public List<Info> ...

  9. ASP.NET 導入Excel

    常常碰到這種需求,為了避免自己每次寫Code都要東翻西找Sample,乾脆丟上來當備份 此外,也為了方便網路上的大大們Copy Paste方便,小弟已經順便標示要複製程式碼的起始結束位置 在歡樂的貼程 ...

  10. 浏览器中的XML与JavaScript

    浏览器中的XML与JavaScript 在处理XML前,你需要在JavaScript中获取它.这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理. XML的节点类型 在 ...