<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>渐变</title>

<script language="javascript" type="text/javascript">

 window.onload=function(){

    var mycan=document.getElementById("myCanvas");

 var canxt=mycan.getContext("2d");

 //在一个矩形中尝试做渐变

   var mylinear=canxt.createLinearGradient(0,0, 150,50);// 创建一个线性渐变

   mylinear.addColorStop(0,"red");

   mylinear.addColorStop(0.5,"yellow");

   mylinear.addColorStop(1,"green");

  // 把渐变对象赋值给fillstyle,理解(和填充颜色联系起来，这里不同的就是纯色用渐变对象取代了，我们还是在对canxt操作)，关键

   canxt.fillStyle=mylinear;

   //绘制矩形

   canxt.fillRect(0,0,150,50);//必不可少

 //为文字创建一个渐变

   var linearText=canxt.createLinearGradient(300,50,600,50);

   linearText.addColorStop(0,"#000");

   linearText.addColorStop(0.5,"#abcdef");

   linearText.addColorStop(1,"#fff");

   canxt.fillStyle=linearText;

   canxt.font="30px Arial";

   canxt.textBaseline="top";//文字对齐方式，在canxt中，要看实际效果

   canxt.fillText("Linear canxt!!",300,50);//参数表示文字x,y轴的位置

// 对角线上的渐变

      var fillColordiagonal = canxt.createLinearGradient(50,200, 100,450);

  // 渐变颜色

  fillColordiagonal.addColorStop(0.2,"red");

  fillColordiagonal.addColorStop(0.4,"black");

  fillColordiagonal.addColorStop(0.6,"green");

  fillColordiagonal.addColorStop(0.75,"yellow");

  // 把渐变对象赋值给fillstyle

  canxt.fillStyle= fillColordiagonal;

  // 绘制矩形

  canxt.fillRect(50,225, 100,250);

// 绘制径向渐变

  fillColorRadial = canxt.createRadialGradient(450,300,0, 450,300,200);

  //径向渐变——createradialGradient(x0,y0,r0,x1,y1,r1)——使用六个参数以一种圆形或是圆锥形的模式来组合两种或多种颜色。

  //1. (x0,y0)： 圆锥的第一个圆的中心

  //2. r0：第一个圆的半径

  //3. (x1,y1)：圆锥的第二个圆的中心

  //4. r1：第二个圆的半径

  fillColorRadial.addColorStop(0.1, "#f00");

  fillColorRadial.addColorStop(0.3, "#f66");

  fillColorRadial.addColorStop(0.5, "#f6c");

  fillColorRadial.addColorStop(0.7, "#fc0");

   fillColorRadial.addColorStop(0.9, "#ff0");

  canxt.fillStyle = fillColorRadial;

  canxt.rect(300,200,500,400);//x,y,l,w

  canxt.fill();

 }

</script>

</head>

<body>

<p><canvas id="myCanvas" width="600" height="400"></canvas></p>

</body>

</html>

（转）HTML5之渐变的更多相关文章

  1. html5 实例渐变

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. HTML5颜色渐变3D文字特效

    在线演示 本地下载

  3. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  4. 8个3D视觉效果的HTML5动画欣赏

    现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验.本文收集了8个非常炫酷的3D视觉效果的HTML5动画,都有源代码分享,你可以学习你感 ...

  5. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  6. 10款强大的jQuery/HTML5应用新鲜出炉

    1.CSS3/jQuery自定义弹出窗口 多种弹出动画 这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了.弹出窗口中可以自定义html,十分灵活.另外最重要的 ...

  7. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  8. Canvas游戏计算机图形教程

    TechbrooD   主站 WOW 登录   注册 0首页 1简介 1.1WWW 技术变迁和生态 1.2WWW 学习建议 1.3WWW 互联网基础知识 1.4WWW Web 1.5 WWW Web ...

  9. html5 基本布局+新标签+新选择器 + 线性渐变

    html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. 精选9个值得学习的 HTML5 效果

    此文转自:http://www.cnblogs.com/lhb25/p/9-html5-effects.html,仅供本人学习参考,版权归原作者所有! 精选9个值得学习的 HTML5 效果[附源码] ...

  2. 【Elasticsearch】深入Elasticsearch集群

    7.1 节点发现启动Elasticsearch的时候,该节点会寻找有相同集群名字且课件的主节点,如果有加入,没有自己成为主节点,负责发现的模块两个目的 选出主节点以及发现集群的新节点7.1.1发现的类 ...

  3. python的if语句

    1.条件测试 (1)概念: 每条if语句的核心都是一个值为True或False的表达式,这种表达式被称为条件测试.Python 根据条件测试的值为True还是False来决定是否执行if语句中的代码. ...

  4. Android4.4源码学习笔记

    1.StatusBar和Recents是如何建立联系的 在BaseStatusBar的start()函数通过getComponent(RecentsComponent.class)得到了Recents ...

  5. 重构指南 - 尽快返回（Return ASAP ）

    尽快返回就是如果方法中的条件判断可以得到结果,则尽快返回该结果. 1. 检查条件,如果不满足就立即返回,不执行下面的逻辑. 2. 当包含大量的if else嵌套,代码可读性变差,也容易出现异常. 3. ...

  6. CRM——权限

    一.引入权限组件 1.引入权限组件rbac 拷贝之前写好的rbac应用到CRM_demo项目下. 在settings中注册rbac的app: INSTALLED_APPS = [ 'django.co ...

  7. Bootstrap拟态框+支付宝首页

    任务没完成,继续来!因为刚才网不好,我辛辛苦苦打了洋洋洒洒一大堆都没了! 我们今天主要是说一个简单的由Bootstrap和HTML5结合而成的小案例: 首先:由标题可得知,这是移动端,所以需要这样一串 ...

  8. android 账户管理

    1.Android开发之帐户管理 2.Android 帐户管理 小记 3.Android特色开发之账户管理 4.android AccountManager and SyncManager 5.And ...

  9. 开发Windows RT平台下的Windows应用商店应用程序的遇到的问题备忘

    1. 关于获取Win8开发者许可证的问题: 有一种情况是:如果系统是Win8.0, 那么如果先激活了windows8(用激活工具), 再安装VS2012,那么在新建项目时会提示获取windows8开发 ...

  10. gamemakerstudio:鼠标输入

    标准鼠标输入常量: mb_left 按下鼠标左键 mb_middle 按下鼠标中键 (这可能不是在所有目标平台上都有效) mb_right 按下鼠标右键 mb_none 没有按下任何鼠标键 mb_an ...