<!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. 安装wine

    sudo add-apt-repository ppa:ubuntu-wine/ppa sudo apt-get update sudo apt-get install  winetricks

  2. C和C++中include 搜索路径的一般形式以及gcc搜索头文件的路径

    C和C++中include 搜索路径的一般形式 对于include 搜索的路径: C中可以通过 #include <stdio.h> 和 #include "stidio.h&q ...

  3. js判断触摸方向

    $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.original ...

  4. 对while；do while;for三种循环语句的理解与区分。

    while:先判断表达式的值,在表达式值为真的情况下执行循环语句,直到表达式值为假结束循环: while(循环条件) { 循环体. } do-while:先执行循环体语句一次,再判别表达式的值,在表达 ...

  5. PHP常用数组操作方法汇总

    array_change_key_case -- 返回字符串键名全为小写或大写的数组array_chunk -- 将一个数组分割成多个array_combine -- 创建一个数组,用一个数组的值作为 ...

  6. git把dev部分提交过的内容合并到master

    git 把dev部分提交过的内容合并到master $ git reflog a6de5cc HEAD@{}: checkout: moving from wf_dev to master 303aa ...

  7. Jquery-ajax()方法提交json数据

    1.ajax()提交json数据代码 var strJson = getStrPayJson(); $.ajax({ type: "POST", url: "/userc ...

  8. select(有局限性)，jq循环添加select的值

    加载的时候改变select的默认值,只需改变select的value值 $("#one").val(@ViewBag.val);//@ViewBag.val是要默认选中的值的val ...

  9. Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作

    <div id="divId" class="divTable"> <div class="tableBody"> ...

  10. CSS Hack兼容

    CSS中有很多标签在不同浏览器中有不同的兼容性问题,问了让网页的功能更好的不同浏览器中显示正常, 需要通过hack的方式来解决浏览器兼容问题. CSS hack问题由来已久,目前我的了解甚少,以下是转 ...