<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 径向渐变 RadialGradient( 小圆圆心横坐标, 小圆圆心纵坐标, 小圆半径, 大圆圆心横坐标, 大圆圆心纵坐标, 大圆半径 )

     */

    var radial =  cxt.createRadialGradient(500, 300, 0, 500, 300, 300); //创建径向渐变

    radial.addColorStop(0.0, 'yellow');

    radial.addColorStop(0.5, 'red');

    radial.addColorStop(1.0, 'blue');

    cxt.fillStyle = radial;

    cxt.fillRect(0, 0, 1000, 600);

</script>
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 绘制一片星空

     */

    var skyStyle = cxt.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2, canvas.height, canvas.height);

    skyStyle.addColorStop(0.0, '#035');

    skyStyle.addColorStop(1.0, 'black');

    cxt.fillStyle = skyStyle;

    cxt.fillRect(0, 0, canvas.width, canvas.height);

    for(var i = 0; i < 150; i++){

        var fiveStart = {};

        fiveStart.Radius = Math.random()*6+6;

        fiveStart.offsetX = Math.random()*canvas.width;

        fiveStart.offsetY = Math.random()*canvas.height*0.65;

        fiveStart.RotationAngle = Math.random()*360;

        drawFiveStar(cxt, fiveStart);

    }

    /**

     * 控制五角星的方法

     */

    function drawFiveStar(cxt, fiveStart){

        cxt.save();

        cxt.translate(fiveStart.offsetX, fiveStart.offsetY); //相对于原点的偏移量

        cxt.rotate(fiveStart.RotationAngle/180*Math.PI); //图形旋转(弧度)

        cxt.scale(fiveStart.Radius, fiveStart.Radius); //图形缩放( X轴的倍数, Y轴的倍数 )

        fiveStartPath(cxt);

        cxt.fillStyle = "yellow";

        cxt.fill();

        cxt.restore();

    }

    /**

     * 绘制标准五角星路径的方法

     */

    function fiveStartPath(cxt){

        cxt.beginPath();

        var x = 0; y = 0;

        for(var i = 0; i < 5; i++){

            x = Math.cos((18+72*i)/180*Math.PI);

            y = Math.sin((18+72*i)/180*Math.PI);

            cxt.lineTo(x, 0-y);

            x = Math.cos((54+72*i)/180*Math.PI)/2.0;

            y = Math.sin((54+72*i)/180*Math.PI)/2.0;

            cxt.lineTo(x, 0-y);

        }

        cxt.closePath();

    }

</script>

HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient的更多相关文章

  1. HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html5 canvas 径向渐变2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. html5 canvas 径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. html5 canvas 填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. canvas径向渐变详解

    创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

  7. html5 canvas 对角线渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html5 canvas 垂直渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. html5 canvas 水平渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Sereja ans Anagrams 优先队列控制

    Sereja has two sequences a and b and number p. Sequence a consists of n integers a1, a2, ..., an. Si ...

  2. test20181007 wzoi

    题意 分析 考场40分 错误的Manacher+dp. 用\(f(i)\)表示\(s_{1 \sim i}\)的最长偶数回文覆盖长度,在Manacher的同时用刷表法转移,每次还要对\(f(i-1)\ ...

  3. matplotlib-------标记特殊点

    import matplotlib.pyplot as plt import numpy as np def demo_test(): a=np.array([0.15,0.16,0.14,0.17, ...

  4. leetcode -day30 Reverse Linked List II

    1.  Reverse Linked List II  Reverse a linked list from position m to n. Do it in-place and in one- ...

  5. SELENIUM如何调用FIREFOX时加载插件

    当selenium调用firefox时,会发现这个firefox里干净的如同一盆清水,自己定制安装的那些插件都不翼而飞了,这个时候那些插件自然就不能使用了,但是当前又必须使用插件该如何是好呢? 解决办 ...

  6. 3种web会话管理方式：基于server端session方式、cookie-based方式、token-based方式

    出处:http://www.cnblogs.com/lyzg/p/6067766.html

  7. spring 使用 maven profile

    先看看 maven 定义 profile 的写法 <!-- profiles --> <profiles> <profile> <activation> ...

  8. mac的framework的路径

    /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.8.sdk/S ...

  9. Java技术专题之JVM逻辑内存回收机制研究图解版

    一.引言 JVM虚拟机内存回收机曾迷惑了不少人,文本从JVM实现机制的角度揭示JVM内存回收的原理和机制. 一.Java平台逻辑架构 二.JVM物理结构 通过从JVM物理结构图我们可以看到: 1.JV ...

  10. AIX6.1 线程模型说明

    引文:线程模型(Threading Model)默认从进程域 (M:N 模型 ) 改为系统全局域 (1:1 模型 ) 在 AIX 5L 中,pthread 线程的默认模型是 m:n 方式,而从 AIX ...