<!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');

    /**

     * 绘制一片星空

     */

    cxt.fillStyle = 'black';

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

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

        var fiveStart = {};

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

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

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

        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 ( 图形变换, 升级版的星空 ) translate, rotate, scale的更多相关文章

  1. HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient

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

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

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

  3. HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo

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

  4. HTML5之图形变换

    - Transformations scale(0.5,0.5) 缩放 rotate(0.175) 旋转 translate(100,50) 位移 - 代码结构 context.scale(x, y) ...

  5. html5 canvas缩放变换

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

  6. HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation

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

  7. HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform

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

  8. Canvas 总结，到第4章 canvas图形变换

    canvas 必须认识到的大坑 <!-- 重点: 在js/canvas标签中定义的宽和高是画布实际的宽和高. 在样式表中定义的宽和高是画布缩放后的宽和高. 即:把js/canvas实际大小缩放到 ...

  9. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

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

随机推荐

  1. ==，equals，hashcode

    总结:== 基本类型比较值,引用类型比较是不是同一个对象,也就是比较内存地址 equals 在没有覆盖的情况下是比较 引用的地址的  和 == 一样 hashcode 和equals关系: hashc ...

  2. streamsets 集成 rabbitmq 以及benthos stream 处理框架

    benthos 是一个stream 处理框架,streamsets 也是,但是两者可以通过不同的工具进行集成起来 一般我们可以使用http 服务,消息中间件(kafka.rabbitmq ...) 使 ...

  3. Oracle C#处理时间类型的Insert

    首先如果直接   parm.Value=DateTime.Now;   insert into table (TheTime)Value(@parm);   执行sql就会报错 ----------- ...

  4. Codeforces Round #243 (Div. 2)——Sereja and Swaps

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012476429/article/details/24665103 题目链接 题意: 给定一个整数 ...

  5. 【转】每天一个linux命令（52）：ifconfig命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网 ...

  6. spring的IDE：STS (Spring Tool Suite)

    STS 比 eclipse 新增的内容: 在 New =>Other... 中新增了 Spring 文件夹,里面新增了 Spring Legacy Project 和 Spring Starte ...

  7. [C++ Primer] : 第10章: 泛型算法

    概述 泛型算法: 称它们为"算法", 是因为它们实现了一些经典算法的公共接口, 如搜索和排序; 称它们是"泛型的", 是因为它们可以用于不同类型的元素和多种容器 ...

  8. PHP接收表单（GET/POST）时，表单名中的点变成了下划线怎么办？

    如果开发中发现,从表单中传递上来的表单名称后端接不到值,不要惊慌,很有可能是表单名称中带有特殊字符(.和空格) PHP接收参数时,发现表单名中如果是 句号(.)或者空格( ),会被转换成下划线(_) ...

  9. 织梦if标签

    {dede:field name='id' runphp='yes' } if(@me < 100 && @me >94) @me='xxxxxx';else @me='y ...

  10. Maven基本使用

    Maven基本使用 一.安装 先去官网下载maven(http://maven.apache.org/download.cgi) 下载下来解压后如下所示  配置环境变量   查看配置成功与否  mav ...