<!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. CVE-2010-2883

    测试环境: Windows xp sp3 Adobe Reader 9.3.4 成因: CoolType.dll库的strcat函数在解析SING表中的uniqueName域时未作长度检查而造成栈溢出 ...

  2. 11.7 Daily Scrum（周末暂停两天Daily Scrum）

    由于APEC放假,有些成员离校了,他们那部分的任务会暂时拖后一些,之后会加班加点赶工. 另外,每个人的任务还是相对独立,离校成员的任务进度不会对其他成员的进度造成很大影响.   Today's tas ...

  3. Scrum Meeting NO.3

    Scrum Meeting No.2 1.会议内容 之前的两天无法登录TFS服务器来生成燃尽图,再加上这种方式只能生成当日的燃尽图,我们决定改用excel生成燃尽图.(作为一个渣渣pm,我用了一下午才 ...

  4. 《Linux内核设计与实现》第五周读书笔记——第十一章

    <Linux内核设计与实现>第五周读书笔记——第十一章 20135301张忻 估算学习时间:共2.5小时 读书:2.0 代码:0 作业:0 博客:0.5 实际学习时间:共3.0小时 读书: ...

  5. YISMILE微信小程序使用说明

    使用说明: 程序名称:易校(YISMILE) 开发团队:KNY三人组 团队logo: 程序logo: 程序功能及使用说明: “失物招领”界面可以浏览发布的失物信息: “发布信息”界面用户可以针对物品类 ...

  6. 实训五（Cocos2dx-3.x 打包apk再理解）

    问题说明:Unable to resolve target 'android-10' SDK版本与Cocos项目默认的版本不相符 如果只是执行 cocos compile -p android 只是执 ...

  7. 团队作业一 庆祝"十五万的总冠军"成立

    很荣幸能够撰写我们团队的第一篇博客. 我们这些同学能组成一个新的团队真的很高兴,团队中的每一个人都有自己的优点的长处.希望在工作中我们能竭尽 所能,充分发挥我们的本事,让我们大家各自发挥自己的才能.. ...

  8. CMake系列之一：概念

    不同的make工具遵循不同的规范和标准,因此针对不同的标准需要不同的Makefile文件.CMake利用一种平台无关的CMakeList.txt文件定制编译流程,根据目标用户的平台生成本地化的Make ...

  9. nil Nil NULL NSNull 之间的区别

    nil -> Null-pointer to objective- c objectNIL -> Null-pointer to objective- c class  表示对类进行赋空值 ...

  10. 3D 立体 backface-visibility

    <!DOCTYPE html> <html> <head> <!-- backface-visibility属性用来设置,是否显示元素的背面,默认是显示的 b ...