<!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. Unity3D — — UGUI之简易背包

    Uinity版本:2017.3 最近在学Siki老师的<黑暗之光RPG>教程,由于教程内用的是NGUI实现,而笔者本人用的是UGUI,所以在这里稍微写一下自己的实现思路(大致上和NGUI一 ...

  2. group by 和count的联合使用问题 [转]

    group by 和count的联合使用问题 今天写查询语句遇到一个问题,就是用group by进行分组以后,用count统计分组以后的个数, 开始写的语句大体是: select count(m.fb ...

  3. 四则运算app第一阶段冲刺

    第一阶段冲刺 [开发环境]:eclipse [开发项目]:小学生四则运算APP [开发人员]:郑胜斌 http://www.cnblogs.com/zsb1/ 孔德颖 http://www.cnblo ...

  4. VS2013安装及测试练习

    一.安装过程 任务:安装VS2010以上的版本. 其实很闹心,因为看了一下VS的安装包,都很大.以学校的网速,得下到什么时候?这是第一想法. 挺麻烦,也挺周折,最终下好了安装包.但是,还是出了问题,在 ...

  5. alpha冲刺随笔（一）

    项目Alpha冲刺(团队) Alpha冲刺第一天 姓名 学号 博客链接 何守成 031602408 http://www.cnblogs.com/heshoucheng/ 黄锦峰 031602411 ...

  6. 常用的cpl 命令 运行直接打开控制台的简单方法

    转载百度百科   工作中处理 windows机器 有时候 打开 网路修改ip地址特别繁琐,所以找了下 快速打开一些简单的控制台 能提高工作效率.   (Control Panel extension) ...

  7. array_pop()方法

    array_pop — 将数组最后一个单元弹出(出栈) 说明 mixed array_pop ( array &$array ) array_pop() 弹出并返回 array 数组的最后一个 ...

  8. Java Socket/HttpURLConnection读取HTTP网页

    以读取百度的http网页为例.如果知道了IP地址和端口,然后新建一个Socket,就直接去读百度的首页,根本没反应,原因是www.baidu.com是以http协议传输的,而现在要以Socket原始的 ...

  9. 【BZOJ1432】[ZJOI2009]Function（找规律）

    [BZOJ1432][ZJOI2009]Function(找规律) 题面 BZOJ 洛谷 题解 这...找找规律吧. #include<iostream> using namespace ...

  10. 内置函数zip()

    zip有拉链的意思,zip函数像拉链一样将0个或多个可迭代对象按相同位置组合成一个zip对象,该zip对象的每个元素是由每个可迭代对象的相同位置的元素组成的元祖. 如果zip中有多个序列,而各序列的长 ...