[Javascript] Gradient Fills on the HTML5 Canvas
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的更多相关文章
- 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏(包含源码)
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animati ...
- 【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
//V1.0 : 实现棋子的布局,画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 :实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源 ...
- 惊艳!9个不可思议的 HTML5 Canvas 应用试验
HTML5 <canvas> 元素给网页中的视觉展示带来了革命性的变化.Canvas 能够实现各种让人惊叹的视觉效果和高效的动画,在这以前是需要 Flash 支持或者 JavaScript ...
- HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- 高性能动画!HTML5 Canvas JavaScript框架KineticJS
高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...
- 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 ...
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- JavaScript+html5 canvas实现本地截图教程
这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...
随机推荐
- pmtest1.asm pmtest2.asm pmtest5.asm 这几个比较重要.
读代码时注意Label后面的文字:desc表示是描述符,seg表示是段 pmtest1.asm 主要讲进入保护模式 http://www.cnblogs.com/wanghj-dz/archive/2 ...
- Codeforces Round #215 (Div. 1)
A Sereja and Algorithm 题意:给定有x,y,z组成的字符串,每次询问某一段s[l, r]能否变成变成zyxzyx的循环体. 分析: 分析每一段x,y,z数目是否满足构成循环体,当 ...
- 手游:cocos2d-x3.0 移植 wp8 开发 各种 “蛋疼”问题的汇总
蛋疼的问题的起源: wp8 做应用开发,显示显示中文,源码包含中文都是没有一点问题的, 只是cocos2d-x 的编码方式(UTF-8),引起的一系列的问题. 1:不能显示服务器返回的中文 2:c++ ...
- 转载爱哥自定义View系列--文字详解
FontMetrics FontMetrics意为字体测量,这么一说大家是不是瞬间感受到了这玩意的重要性?那这东西有什么用呢?我们通过源码追踪进去可以看到FontMetrics其实是Paint的一个内 ...
- 【POJ】1692 Crossed Matchings
经典DP,想了很久,开始想复杂了. #include <iostream> using namespace std; #define MAXNUM 100 int mymax(int a, ...
- IBM Rational-完整的软件工程解决方案工具集
IBM,即国际商业机器公司,1911年创立于美国,是全球最大的信息技术和业务解决方案公司,其业务遍及全球170多个国家和地区.IBM软件分为五个部分,其中Rational系列是专门针对软件工程的软件工 ...
- Eclipse问题解决方案,不断更新
执行“software update”时出现:Error retrieving "feature.xml"... 执行“software update”时出现:Error retr ...
- 我的第一个Hibernate程序
1.建表建序列(所用数据库为Oracle,数据库名为XE,创建用户hibernate,密码为123456) conn system/manager; ; grant connect to hibern ...
- 保持与 Microsoft Azure Files 的连接
我们在最近的博客文章中介绍了 Azure StorageFiles的预览版,请单击此处.该文章包含 Azure Files 的相关信息,说明了如何申请预览版并开始使用,还介绍了一些有助于创建共享和传 ...
- javascript 中concat与push的区别
1. push 遇到数组参数时,把整个数组参数作为一个元素:而 concat 则是拆开数组参数,一个元素一个元素地加进去. 2. push 直接改变当前数组:concat 不改变当前数组. 总结:如果 ...