<!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. nodejs日志管理log4js

    常用的2种配置: 1.按文件大小分片,备份若干数量的文件 var log4js = require('log4js'); log4js.configure({ "appenders" ...

  2. Ansible 介绍和使用

    简介 Ansible是一个简单的自动化运维管理工具,基于Python语言实现,由Paramiko和PyYAML两个关键模块构建,可用于自动化部署应用.配置.编排task(持续交付.无宕机更新等).主版 ...

  3. BJFU 1551 ——delightful world——————【暴搜】

    delightful world 时间限制(C/C++):20000MS/30000MS          运行内存限制:65536KByte总提交:33            测试通过:10 描述 ...

  4. hdu 2845——Beans——————【dp】

    Beans Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  5. [转]解读ASP.NET 5 & MVC6系列（8）：Session与Caching

    本文转自:http://www.cnblogs.com/TomXu/p/4496445.html 在之前的版本中,Session存在于System.Web中,新版ASP.NET 5中由于不在依赖于Sy ...

  6. sql server数据库打不开

  7. [转]谷歌Chrome浏览器开发者工具教程—基础功能篇

    来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...

  8. Spring @Resource, @Autowired and @Inject 注入

    Overview I’ve been asked several times to explain the difference between injecting Spring beans with ...

  9. python作业-网络编程

    1.什么是C/S架构? 答:C指的是client(客户端软件),S指的是Server(服务端软件) 2.互联网协议是什么?分别介绍五层协议中每一层的功能? 答:互联网的核心就是由一堆协议组成.如果把计 ...

  10. vue.extend与vue.component的区别和联系

    一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固 Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部 ...