<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>径向渐变</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function canvasApp(){

    if(!canvasSupport()){

        return;

    }else{

        var theCanvas = document.getElementById('canvas')

        var context = theCanvas.getContext("2d")

    }

    drawScreen();

    function drawScreen(){

        var gr = context.createRadialGradient(50,50,25,50,50,100);

        //添加颜色端点

        gr.addColorStop(0,'rgb(255,0,0)');

        gr.addColorStop(.5,'rgb(0,255,0)');

        gr.addColorStop(1,'rgb(0,0,255)');

        //应用fillStyle生成渐变

        context.fillStyle = gr;

        context.fillRect(0,0,200,200);

    }

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

context.createRadialGradient(50,50,25,50,50,100);

6个参数定义2个圆的圆心和半径

第一个圆是开始圈

第二个圆是结束圈

第一个圆位于（50,50）半径25

第二个元位于（50,50）半径为100

最后不好意思我实在不想形容这个奇怪的造型了，不知道为什么看着好想吐。。。建议不要长时间的看着这个图

html5 canvas 径向渐变的更多相关文章

  1. html5 canvas 径向渐变2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient

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

  3. html5 canvas 填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. canvas径向渐变详解

    创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

  5. html5 canvas 对角线渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html5 canvas 垂直渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html5 canvas 水平渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  9. html5 canvas图片渐变

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Unity5.6之前版本VRTK插件基础交互

    一.VR运行环境配置: 安装steam,在steam上安装SteamVR驱动. 在Unity项目中需要导入VRTool插件包(已上传服务器),里面包含两个插件一个是SteamVR插件,一个是VRTK插 ...

  2. 汉码盘点机PDA无缝对接思迅思迅盘点机思迅条码数据采集器批号商品盘点的方法

    1.1.    盘点批号 如果某些商品进行了批号管理,我们不仅仅要清点什么商品总数有多少个,我们还要区分该商品的某个批号有多少个数量,因此以前批号盘点工作量是非常大的. 我们的盘点机PDA支持批号盘点 ...

  3. LeetCode-97.交错字符串

    给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的. 示例 1: 输入: s1 = "aabcc", s2 = "dbbca&quo ...

  4. Laravel 5.6 视图用Blade语法传递变量和流程控制if 语句和循环语句

    Laravel5.6 视图用Blade语法传递变量和流程控制if 语句和循环语句 Laravel 的 View 部分是内置了两套输出系统:直接输出和使用 Blade 引擎“编译”后输出,默认情况下它们 ...

  5. YQCB冲刺第二周绩效评价

    标准队员 工作质量 20% 工作态度 20% 工作量 30% 工作难易程度 20% 团队意识 10% 总分 陈美琪 17 18 24 17 9 85 张晨阳 19 19 27 19 9 93 刘昭为 ...

  6. week6：个人博客作业

    这周主要是参与团队编程的讨论 团队编程中发现很多问题: 1,每个人共同空闲的时间不好找 就我组来说,我是考研,每天晚上都要去外面上课,有的人在进行大创,,也有的像我一样在整考研的东西,还有的进行其他, ...

  7. Access restriction: The type 'BASE64Decoder' is not API

    Access restriction: The type 'BASE64Decoder' is not API (restriction on required library 'C:\Program ...

  8. 用prop还是attr

    jquery中attr和prop的区别   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答 ...

  9. 关于C++内联函数

    关于C++内联函数有以下实验: 有三段测试代码 1.手动展开内联函数. 2.非内联函数. 3.inline标记的内联函数.(函数只有一行代码,以确保函数被内联) 测试三种情况: VS工程在Releas ...

  10. linux执行jmeter脚本报错

    今天做性能测试发现,报错为100% windows上面执行又是成功的,最后在linux的jmeter脚本中加了一个BeanShell PostProcessor prev.setDataEncodin ...