<!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,100,100,100);

        //添加颜色端点

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

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

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

        //应用fillStyle生成渐变

        context.fillStyle = gr;

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

    }

}

</script>

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

你的浏览器无法使用canvas

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

</canvas>

</body>

</html>

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

  1. html5 canvas 径向渐变

    <!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. 三丰云使用记录--部署iis服务器

     写在前面的话:看在我这么热心写使用推广记录,麻烦延长下使用天数,谢谢 官网地址:https://www.sanfengyun.com 三丰云是北京太极三丰云计算有限公司旗下网络服务品牌,十八年IDC ...

  2. EOS开发基础之六：使用cleos命令行客户端操作EOS——智能合约之eosio.msig和eosio.system

    上一节我们搞了老半天,也没整明白Exchange这个合约到底干啥用的.就它官方提供的说法,是用于货币的创造和交易.我没整明白,所以去看了下代码,发现代码头文件里面有下面这段话: This contra ...

  3. Redis学习笔记之Redis的对象

    类型与编码: typedef struct redisObject {                unsigned type:4://类型               unsigned encod ...

  4. YQCB冲刺第二周第三天

    今天的任务依旧查看消费明细的功能. 遇到的问题为显示消费记录时显示所有用户的消费记录. 站立会议 任务面板

  5. 冲刺Two之站立会议8

    今天对软件进行了用户试用,找了一些同学让他们试用软件之后对软件给出了建议,这样我们可以在一定程度上对它进行进一步地优化.

  6. 第八周PSP（11.5--11.9)

    2016.11.5 2016.11.6 2016.11.7 2016.11.8 2016.11.9

  7. 一本通1632【 例 2】[NOIP2012]同余方程

    1632:[ 例 2][NOIP2012]同余方程 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 求关于 x 的同余方程 ax≡1(mod b) 的最小正整 ...

  8. MongoDB高级操作(2)

    查询方法-常用查询方法 查询多条数据 --db.集合名称.find({条件文档}) 查询一条数据 --db.集合名称.findOne({条件文档}) 结果格式化 --pretty()方法 --db.集 ...

  9. Python:目录和文件的操作模块os.path和OS常用方法

    1.目录和文件的操作模块os.path,在使用之前要先导入:import os.path.它主要有以下几个重要的功能函数: #!/user/bin/python #coding= utf-8 impo ...

  10. P4932 浏览器

    题目背景 __stdcall在用Edge玩slay的时候,鼠标会经常失灵,这让她十分痛苦,因此她决定也要让你们感受一下Edge制造的痛苦. 题目描述 __stdcall给了你n个点,第i个点有权值x[ ...