<!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. Latex 自定义命令：用于一些特殊单词的显示

    \usepackage{xspace} \newcommand{\ie}{{\emph{i.e.}},\xspace} \newcommand{\viz}{{\emph{viz.}},\xspace} ...

  2. EF db first 获取表名称

    一直以来,使用DB FIRST的方式,想得到表名,最后一直不得其法.直到昨天晚上,反编译自己的程序集的时候,突然发现EF表结构和数据实体类的映射关系存在什么地方.然后就有了这篇文章. 咱们一步步来. ...

  3. 阿里开源项目arthas在docker环境初始化

    需求 我前一篇是在window环境下做的测试,实际情况现在的生成环境程序都部署在了docker环境下,此环境对arthas可能会缺失很多必要组件 目前的基础环境是在docker容器中,只存在基本的to ...

  4. springboot源码解读

    springboot源码从main函数开始 public static void main(String[] args) { ApplicationContext app = SpringApplic ...

  5. JavaScript中子类调用父类方法的实现

    一.前言 最近在项目中,前端框架使用JavaScript面向对象编程,遇到了诸多问题,其中最典型的问题就是子类调用父类(super class)同名方法,也就是如C#中子类中调用父类函数base.** ...

  6. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...

  7. [P2402] 奶牛隐藏

    二分答案+最大流. 对答案建图,若长度≤答案,连边即可.(先要预处理点对间的最短路) 当然得拆点,(否则,就此题而言,就会出现流量x-y不走x-y的最短路边的情况,而是走了一条路径 ,答案约束的仅仅是 ...

  8. logstash grok 内置正则

    参考地址:https://github.com/elastic/logstash/blob/v1.4.2/patterns/grok-patterns USERNAME [a-zA-Z0-9._-]+ ...

  9. 全网最详细的一个超级好用的命令行工具【Cmder】是什么？

    不多说,直接上干货! Cmder是什么? 一款Windows环境下非常简洁美观易用的cmd替代者,它支持了大部分的Linux命令.支持ssh连接linux,使用起来非常方便.比起cmd.powersh ...

  10. 边缘化搭建 DotNet Core 2.1 自动化构建和部署环境(下)

    写在前面 本篇文章是上一篇边缘化搭建 DotNet Core 2.1 自动化发布和部署(上)的后续操作,本文主要讲解如何开启Docker Remote API,开启Remote API后的权限安全问题 ...