<!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. ife task0003学习笔记（五）：JavaScript面向对象

    JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象.而在 JavaScript 中,this ...

  2. 简单的 shell 脚本 切分日志

    为避免日志过大,需要按天分割日志,定时计划任务脚本如下: /data/shell/backup_yesterday_nginx_log.sh declare logs_path="/data ...

  3. innosetup的静默安装与卸载

    静默安装,就是减少程序与用户的交互,一站式的安装过程(一气呵成) 1. 静默安装参数 innosetup的静默安装是通过参数来控制的 1.1.  /silent                     ...

  4. C#的split()分割字符串

    简单的说: 在C#中 str.Split("===="); //这样是错误的,只能 str.Split('=');//参数只能是char类型的,不能是字符串的 如果非得要以字符串分 ...

  5. UML建模概述

    UML的组成主要有事物.图.关系. UML中的事物: (1)构件事物:UML模型的静态部分,描述概念或物理元素,包括以下 a. 类:类是对一组具有相同属性.相同操作.相同关系和相同语义的对象的抽象.包 ...

  6. c# 使用队列保存图片

    Invoke(new EventHandler(delegate { Bitmap bitmap2 = (Bitmap)eventArgs.Frame.Clone(); ThreadPool.Queu ...

  7. shell命令修改文件内容

    有个 test.txt 文件内容为  hello tom,现在修改成 hello jerry,并保存到test2.txt sed 's/tom/jerry/g' test.txt >test2. ...

  8. reload()与reload(true)

    如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已 改变.如果文档已改变,reload() 会再次下载该文档.如果文 ...

  9. 文章点赞功能（Ajax）

    一.文章点赞样式构建 1.将base.html的css样式改为外部引入 将base.html的内嵌样式删除,改为使用 HTML 头部的 <head> 标签对中使用<link>标 ...

  10. Android 获取系统时间和网络时间

    有些时候我们的应用中只能使用网络时间,而不能使用系统的时间,这是为了避免用户关闭了使用网络时间的功能后所产生的误差. 直接上代码. 1.清单文件中网络添加权限. <!-- 访问Internet资 ...