<!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. OD之修改文件标题(一)

    OD是逆向工程中的一个重要工具,逆向工程调试说明具体请参考:百度百科,OD介绍,当然就我了解而言,俗话就是破解软件,市面上的什么破解版,精简版啥的基本都是通过这种技术的,但是这并不能一概而论说逆向工程 ...

  2. 阿里(蚂蚁，菜鸟)+百度+网易面经(JAVA)

    本人综述: 本人本科和硕士均是毕业于普通的双非院校,参加过ACM竞赛,阿里面了三次全被拒了,网易收到offer. 阿里面试: 阿里的面试问的都是很基础的东西,如操作系统的简单问题,计算机网络的基本问题 ...

  3. 金蝶盘点机PDA仓库条码管理：仓库如何盘点

    1.1. 仓库盘点 传统的仓库盘点,需要人工手工抄写盘点单,时候再去电脑上一行行的录入盘点单,操作非常耗时费力,往往需要盘点好几天,最终盘点效果还不好,在抄写过程中容易出现错误,从而造成盘点结果不准确 ...

  4. pytorch 对变长序列的处理

    一开始写这篇随笔的时候还没有了解到 Dateloader有一个 collate_fn 的参数,通过定义一个collate_fn 函数,其实很多batch补齐到当前batch最长的操作可以放在colla ...

  5. Async 异步转同步详细流程解释

      安装 npm install async --save 地址 https://github.com/caolan/async Async的内容主要分为三部分 流程控制: 简化九种常见的流程的处理 ...

  6. ace -- 语法高亮

    Creating a Syntax Highlighter for Ace 给ace创建一个语法高亮 Creating a new syntax highlighter for Ace is extr ...

  7. linux使用curl上传文件并且同时携带其它传递参数

    一般使用linux原生态的命令curl上传文件时命令如下 假如要上传文件是myfile.txt curl -F "file_name=@myfile.txt" -X POST &q ...

  8. Leetcode题库——40.组合总和II

    @author: ZZQ @software: PyCharm @file: combinationSum2.py @time: 2018/11/15 18:38 要求:给定一个数组 candidat ...

  9. python 按照固定长度分割字符串

    >>> import re >>> string = '123456789abcdefg' >>> re.findall(r'.{3}', str ...

  10. Day25-JSONP跨域请求

    1.  json 是一种数据格式, jsonp 是一种数据调用的方式.你可以简单的理解为 带callback的json就是jsonp. 2. Python里面有个模块requests, request ...