<!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. Jenkins+Postman+Newma+Xmysql之API全自动化测试

    第一章 前期准备:各种安装配置介绍 ①Postman安装及使用 ②Newman 安装及使用 ③Xmysql 安装及使用 ④Jenkins安装及配置 1.postman 安装及使用 1.1.postma ...

  2. postgres formencode.api.Invalid

    错误提示: Invalid: expected an int in the IntCol 'geom', got <type 'str'> '010100000007EBFFFC3A611 ...

  3. Windows 下推荐软件

    神器 Dism++ Quicker(效率工具) Bandizip 火绒安全软件 Everyting(搜索神器并支持http远程连接) Xmanager VMware Workstation IDMan ...

  4. 【读书笔记】C#高级编程（一）.NET体系结构

    写在前面:从业两年来,一直停留在会用的阶段,而没有去仔细思考过为什么这么用,之前也大致扫过<c#高级编程>一书,这次想借一袭脑海中的冲动,再次好好仔细过过这本书,夯实基础,温故知新. 一. ...

  5. 拼凑的宿主-host

    开发两年之久,竟然不知道host这个词是什么意思.前些天有幸遇到了,就跟别人请教了.今天理絮一下.总比不知道强吧. 白话来说宿主就是一些框架运行机制运行时需要依赖的平台. 例如web开发常用的IIS, ...

  6. Spring Chapter4 WebSocket 胡乱翻译 （一） 一个例子

    因为没有基础,不知道从哪里入手. 文档里的例子,https://github.com/rstoyanchev/spring-websocket-portfolio,这个除了WebSocket,还整了S ...

  7. 设计模式之职责链模式(JAVA实现)

    学习netty框架时,看到有人说netty用到了设计模式的职责链模式,学习一下职责链模式,主要参考大话设计模式. 主要场景: 小菜想要加薪,向经理提出加薪请求,经理没有权限,经理交由总监处理,总监也没 ...

  8. ajax异步请求/同源策略/跨域传值

    基本概念 Ajax 全称是异步的 JavaScript 和 XML . 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  9. Grunt压缩图片和JS

    今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...

  10. keras 自定义 custom 函数

    转自: https://kexue.fm/archives/4493/,感谢分享! Keras是一个搭积木式的深度学习框架,用它可以很方便且直观地搭建一些常见的深度学习模型.在tensorflow出来 ...