<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>添加月亮</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;">

        The current browser does not support Canvas, can replace the browser a try!

    </canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 1200;

            canvas.height = 800;

            if(canvas.getContext('2d')){

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

                // context.fillStyle = "#000";

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

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

                skyStyle.addColorStop(1.0,'black');

                context.fillStyle = skyStyle;

                context.fillRect(0,0,canvas.width,canvas.height)

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

                    var r = Math.random() * 5 + 5;

                    var x = Math.random() * canvas.width;

                    var y = Math.random() * canvas.height * 0.65;

                    var a = Math.random() * 360;

                    drawStar(context , x , y , r , a )

                }

                fillMoon(context,2,900,200,100,30)

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

        function fillMoon(cxt,d,x,y,R,rot,fillColor){

            cxt.save();

                cxt.translate(x,y);

                cxt.rotate(rot*Math.PI/180);

                cxt.scale(R,R);

                pathMoon(cxt,d);

                cxt.fillStyle = fillColor || "#fb5";

                cxt.fill();

            cxt.restore();

        }

        function pathMoon(cxt,d){

            cxt.beginPath();

                cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);

                moveTo(0,-1);

                cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);

            cxt.closePath();

        }

        function dis(x1,y1,x2,y2){

            return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))

        }

        function createBackgroundCanvas(){

            var backCanvas = document.createElement("canvas");

            backCanvas.width = 100;

            backCanvas.height = 100;

            var backCanvasContext = backCanvas.getContext('2d');

            drawStar(backCanvasContext,50,50,50,0);

            return backCanvas

        }

        function drawStar(cxt,x,y,R,rot){

            cxt.save();

                cxt.translate(x,y);

                cxt.rotate(rot/180*Math.PI);

                cxt.scale(0.05*R,0.05*R)

                starPath(cxt);

                cxt.fillStyle = "#fb3";

                cxt.strokeStyle = "#fd5";

                cxt.lineWidth = 3;

                cxt.lineJoin = "round";

                cxt.fill();

                cxt.stroke();

            cxt.restore()

        }

        function starPath(cxt){

            cxt.beginPath();

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

                cxt.lineTo(Math.cos( (18+i*72) / 180 * Math.PI )*20,

                                -Math.sin( (18+i*72) / 180 * Math.PI )*20);

                cxt.lineTo(Math.cos( (54+i*72) / 180 * Math.PI )*0.5*20,

                                -Math.sin( (54+i*72) / 180 * Math.PI )*0.5*20);

            }

            cxt.closePath();

        }

    </script>

</body>

<script>

    /*图形变换

        位移 translate(x,y)

        旋转 rotate(deg)

        缩放 scale(sx,sy)

    */

</script>

</html>

canvas-star6.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. 【Struts2学习笔记-3】常量配置

    Struts2常量 配置Struts2常量值有3个地方,1)在struts.properties文件中配置常量:2)在web.xml文件中配置FileterDispatcher指定初始化参数来配置常量 ...

  2. nginx的https配置

    测试自签名的ssl证书 首先执行如下命令生成一个key openssl genrsa -des3 - 然后他会要求你输入这个key文件的密码.不推荐输入.因为以后要给nginx使用.每次reload ...

  3. 228. Summary Ranges

    Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...

  4. Unable to locate Android SDK used by project

    Unable to locate Android SDK used by project: DJIgojava.lang.RuntimeException: Unable to locate Andr ...

  5. SOA_Oracle SOA Suite and BPM Suite 11g官方虚拟机安装指南（案例）

    参考:Oracle官方 - http://www.oracle.com/technetwork/middleware/soasuite/learnmore/vmsoa-172279.html?ssSo ...

  6. UVa 297 Quadtrees（树的递归）

    Quadtrees 四分树就是一颗一个结点只有4个儿子或者没有儿子的树 [题目链接]UVa 297 Quadtrees [题目类型]树的递归 &题意: 一个图片,像素是32*32,给你两个先序 ...

  7. POJ-3461 Oulipo（KMP，模式串在主串中出现次数）

    题意:给你两个字符串p和s,求出p在s中出现的次数. 显然,我们要先把模式串放到前面,之后主串放后面,中间隔开,这样就可以根据前缀数组的性质来求了. 我先想直接把p接到s前面,之后求Next数组对st ...

  8. poj 3048 Max Factor（素数筛）

    这题就是先写个素数筛,存到prime里,之后遍历就好,取余,看是否等于0,如果等于0就更新,感觉自己说的不明白,引用下别人的话吧: 素数打表,找出20000之前的所有素数,存入prime数组,对于每个 ...

  9. python (16) 如何在linux下安装lxml（pip安装，ubuntu下，centos下）

    首先需要明白lxml包依赖其他包,必须先安装其他包然后再安装lxml 安装python-pip:方便安装python的第三方包 [root@******/]# wget https://bootstr ...

  10. LPC1768之中断

    一外中断:只有特定的4个外中断引脚, 1 在特定的引脚上,引脚功能要选对应的外中断功能 2设定的触发条件(高低电平.上升/下降沿) 3 NVIC设定,特定的通道. 二GPIO中断: 1只有GPIO0和 ...