<!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. VS2010带不出System.Data.OracleClient这个引用的解决方案

    在使用VS2010的时候有时会带不出System.Data.OracleClient这个引用,可以使用以下解决方法: 右击项目的属性,在弹出窗口中有一个“目标框架”下拉框选项,默认会是.NET FRA ...

  2. Linux 第五周 实验： 分析system_call中断处理过程

    姬梦馨 原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 使用gdb跟踪分析一个系统调用内核函数 ...

  3. Opendaylight的Carbon(碳)版本安装

    Opendaylight Carbon(碳)版本安装 1.更新源 sudo apt-get update sudo apt-get upgrade 2.安装JDK1.8 sudo apt-get in ...

  4. Day Ten

    站立式会议 站立式会议内容总结 331 今天:话题单选对话框 遇到问题:无 442 今天:数据库交互,解决timepicker问题 遇到的问题:无 439 今天:测试模块功能 遇到问题:无 会议照片 ...

  5. 第三次spring冲刺2

    完成了对错题的收集,和做错题的功能,运用了android自带的SQLite数据库.

  6. 12th 本周工作量及进度统计

    本周PSP: C(类别) C(内容) S(开始时间) ST(结束时间) I(中断时间) T(实际时间) 活动 1日—3日 用户调查 12月1日21:00 12月3日12:00 25小时 14小时 活动 ...

  7. PAT 甲级 1090 Highest Price in Supply Chain

    https://pintia.cn/problem-sets/994805342720868352/problems/994805376476626944 A supply chain is a ne ...

  8. 从0在windows上一次性上传本地整个项目（包含所有文件/文件夹）到 Github

    1.注册并登陆Github. 2.登陆进去之后的页面,点击这个“库”,这表示你在Github上上的代码仓库,我这里已经创建过一个了,所以数量是1 3.在仓库选项卡中,点击“新建”按钮添加一个项目. 4 ...

  9. Java_按位与&,按位或,取反,左移,右移运算符

    //按位与运算& System.out.println(0&0);//0 System.out.println(0&1);//0 System.out.println(1&am ...

  10. [代码]--SQLServer数据库的一些全局变量

    select APP_NAME ( ) as w --当前会话的应用程序 select @@IDENTITY   --返回最后插入的标识值 select USER_NAME()    --返回用户数据 ...