<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制线性渐变-高级函数</title>
</head>

<body onLoad="draw('canvas')">
<canvas id="canvas" width="1300" height="500" />
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#f0f0f0";
context.fillRect(0, 0, 1300, 500);/*填充矩形背景色*/
var gl = context.createLinearGradient(0, 0, 1300, 500);/*定义渐变的方向吧，0，0是渐变起点的坐标，300,300是重点的坐标，这样写是一个正方形的对角线渐变。如果是0，0，0，300，则是由上自下的一个垂直渐变*/
gl.addColorStop(0, 'rgb(155, 0, 255)' );/*指定渐变的颜色额，两个值（offset, color）其中，color值可以有fillstyle的四种一样额形式#十六进制、rgb、rgba、英文单词等都可以，而前边的offset值只可以在0-1之间，是指颜色离开渐变点的偏移量。。addColorStop可以不止两个，可以定义很多次，但是，最少有两个，用以定义开始颜色和结束颜色。而且，开始的偏移值必须为0，结束的偏移值必须为1 ，中间的必须在0-1之间*/
<!--另外，createLinearGradient和addColorStop一定是紧接着写的-->
gl.addColorStop(1, 'rgb(255, 0, 255)');
context.fillStyle = gl;/*fillStyle不止填充颜色一种形式，这里呢，填充渐变是另一种形式，还有填充图像和文字等。但是，这个填充渐变，不是直接写的是，而是用一个变量gl代替context.createLinearGradient的形式，然后style再等于变量gl就可以了*/
context.fillRect(0, 0, 1300, 500);/*画出要填充的范围*/
<!--/*---------------------------------------以上为背景的渐变------------------------------------------------*/-->
var g2 = context.createLinearGradient(0, 0, 0, 400);/*这样是垂直的渐变*/
g2.addColorStop(0, 'rgba(154, 255, 0, 0.25)');
g2.addColorStop(0.5, 'rgba(100, 255, 60, 0.35)');
g2.addColorStop(1, 'rgba(60, 255, 173, 0.55)');
for (var i=0; i<10; i++){
context.beginPath();
context.arc(i * 25, i * 25, i * 25, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = g2;
context.fill();
}

<!--这个效果是先定义一个线性渐变样式，再设置渐变的颜色，这里设置了三个，然后用一个for循环，做出十个圆形，最后填充圆形的样式和颜色-->
}
</script>
</body>
</html>

CSS3-canvas绘制线性渐变的更多相关文章

  1. 深入理解css3中的线性渐变

    css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...

  2. CSS3中颜色线性渐变实战

    css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...

  3. Canvas绘制渐变

    1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient(x0,y0,x1,y1),坐标点(x0,y0)是起点 ,(x1,y1)是终点 创建一个渐变色 var ...

  4. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  5. Canvas使用渐变之-线性渐变详解

    在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1)  返回 CanvasGrad ...

  6. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  7. HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  9. 使用canvas来完成线性渐变和径向渐变的功能

    fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色.   线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数.   第一步 : 使用一个新的函数cre ...

随机推荐

  1. SDRAM读写一字（下）

    SDRAM读写一字 SDRAM控制模块 上电后进行初始化状态,初始化完成后进入空闲状态,在此进行判断如下判断: 如果自刷新时间到,则进行自刷新操作,操作完成后重新进入空闲状态: 如果读使能有效则进行读 ...

  2. [BZOJ2768][JLOI2010]冠军调查（最小割）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2768 分析: 如果一个点i认为是0,则连一条S->i,如果认为是1,则i-> ...

  3. Apache CXF实现WebService发布和调用

    第一种方法:不用导入cxf jars 服务端: 1. 新建Web工程 2.新建接口和实现类.测试类 目录结构图如下: 接口代码: package com.cxf.spring.service; imp ...

  4. LAMP安装各种问题解决方案

    LAMP环境配置安装注意安装步骤及说明事项. LAMP安装各种问题解决 1. 访问ftp报错 解决: 关闭selinux vi /etc/selinux/config 内容修改为: selinux=d ...

  5. Mvc多级Views目录 asp.net mvc4 路由重写及 修改view 的寻找视图的规则

    一般我们在mvc开发过程中,都会碰到这样的问题.页面总是写在Views文件夹下,而且还只能一个Controller的页面只能写在相应的以Controller名命名的文件夹下.如果我们写到别处呢?那么肯 ...

  6. Java设计模式（二） 观察者模式

    观察者模式: 定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,他的所有依赖者都会受到通知并自动更新. 1,定义事件源接口 package com.pattern.observer; pub ...

  7. C#-WinForm-打印控件

    打印控件 绘制如下窗体 一.PrintDocument -打印的基础  首先放置PrintDocument控件,双击事件PrintPage设置要打印的样式(李献策lxc) //第一步 设置打印属性 p ...

  8. 一起学HTML基础-JavaScritp简介与语法

    简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件.  JavaScript 是 Web 的编程语 ...

  9. 14 接口-interface的定义与实现

    接口的基本语法一: 1.使用interface 定义 2.接口当中的方法都是抽象方法 3.接口当中的方法都是public权限 接口的定义: interface USB { public void re ...

  10. Xcode插件VVDocumenter Alcatraz KSImageNamed等安装

    今天安装VVDocumenter,总是不起作用...所以用Alcatraz...下面介绍下Alcatraz 一.Alcatraz Alcatraz 是一款 Xcode的插件管理工具,可以用来管理XCo ...