<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;">

        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 = 800;

            canvas.height = 800;

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

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

                // context.arc(400,400,300,0.5*Math.PI,1.5*Math.PI,true);

                // context.moveTo(400,100);

                // context.arcTo(1200,400,400,700,(400-100)*dis(400,100,1200,400)/(1200-400))

                // context.stroke();

                fillMoon(context,2,400,400,300,0)

            }else{

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

            }

        }

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

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

        }

        // 优化

        // x,y位置 r半径

        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.quadraticCurveTo(1.2,0,0,1)

            cxt.closePath();

        }

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

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

        }

    </script>

</body>

</html>

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

  1. canvas流星月亮星星银河

    这是页面的特效,首先月亮直接出现,然后星星和银河渐渐的出现(一闪一闪),最后流星划过,留下完美的句点. 所有的动画都是通过帧来实现的. 星星的代码分为2部分,首先是随机生成星星,然后是绘制星星,最后是 ...

  2. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. canvas烟花锦集

    canvas可以实现不同动画效果,本文主要记录几种不同节日烟花效果实现. 实现一 效果地址 html <canvas id="canvas"></canvas&g ...

  4. canvas绘制星星和月亮

    用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标. 可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制.在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y. 而每个大顶点相差 ...

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

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

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

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

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

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

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

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

  9. Canvas坐标系转换

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

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

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

随机推荐

  1. django扩展User认证系统

    第一种方法proxy 如果你对Django提供的字段,以及验证的方法都比较满意,没有什么需要改的.但是只是需要在他原有的基础之上增加一些操作的方法.那么建议使用这种方式.示例代码如下: #在model ...

  2. ubuntu16.04安装最新版docker、docker-compose、docker-machine

    安装前说明: 本文将介绍在ubuntu16.04系统下安装和升级docker.docker-compose.docker-machine. docker:有两个版本:docker-ce(社区版)和do ...

  3. rpm is for architecture aarch64 ; the package cannot be built on this system

    问题:rpm is for architecture aarch64 ; the package cannot be built on this system $ sudo alien --to-de ...

  4. Linux下的redis的持久化,主从同步及哨兵

    redis持久化 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失, 为了解决这个问题,Redis提供了两种持久化的方案,将内存中的数据保存到磁盘中,避免数据的丢失. RDB持久 ...

  5. javaweb中的乱码问题

    0.为什么需要编码,解码, 无论是图片,文档,声音,在网络IO,磁盘io中都是以字节流的方式存在及传递的,但是我们拿到字节流怎么解析呢?这句话就涉及了编码,解码两个过程,从字符数据转化为字节数据就是编 ...

  6. Android Studio在项目中添加assets资源目录

    第一步: 切换到"Project"视图,找到app --> src --> main目录 第二步: 右键点击main目录,New --> Directory -- ...

  7. VMware Tools安装教程

    安装依赖: sudo yum install eject 步骤: 确保 Linux 虚拟机已打开电源. 如果正在运行 GUI 界面,请打开命令 shell. 注意:以 root 用户身份登录,或使用 ...

  8. Java学习笔记43（打印流、IO流工具类简单介绍）

    打印流: 有两个类:PrintStream,PrintWriter类,两个类的方法一致,区别在于构造器 PrintStream:构造方法:接收File类型,接收字符串文件名,接收字节输出流(Outpu ...

  9. cracking the coding interview系列C#实现

    原版内容转自:CTCI面试系列——谷歌面试官经典作品 | 快课网 此系列为C#实现版本 谷歌面试官经典作品(CTCI)目录   1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除 ...

  10. Nginx+Keepalived 实现高可用

    Keepalived 是一个高性能的 服务器高可用 或 热备解决方案,Keepalived主要来防止服务器单点故障的问题,可以通过其与Nginx的配合来实现web服务端的高可用. Keepalived ...