<!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. 131.leetcode-Palindrome Partitioning

    解法一. class Solution { public: vector<vector<string>> partition(string s) { vector<vec ...

  2. struts2框架学习笔记4：获取参数

    第一种参数获取方式: 编写一个前端页面,提交表单,做示例: <form action="${pageContext.request.contextPath}/Demo1Action&q ...

  3. ElasticSearch权威指南学习（文档）

    什么是文档 在Elasticsearch中,文档(document)这个术语有着特殊含义.它特指最顶层结构或者根对象(root object)序列化成的JSON数据(以唯一ID标识并存储于Elasti ...

  4. python循环语句详细讲解

    想必大家都知道python循环语句吧,可以python循环语句有多种,比如for循环.while循环.if.else等等,   我们可以通过设置条件表达式永远不为 false 来实现无限循环,实例如下 ...

  5. .NET手记－Autofac进阶（传递注册参数 Passing Parameters to Register）

    当你注册组件时,可以为组件服务传入一系列参数,用于服务解析时使用. 可使用的参数类型 Available Parameter Types Autofac提供了集中参数匹配类别: NamedParame ...

  6. IOS 整体框架类图值得收藏

    Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. 1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Co ...

  7. DDD实战进阶第一波(三)：开发一般业务的大健康行业直销系统（搭建支持DDD的轻量级框架二）

    了解了DDD的好处与基本的核心组件后,我们先不急着进入支持DDD思想的轻量级框架开发,也不急于直销系统需求分析和具体代码实现,我们还少一块, 那就是经典DDD的架构,只有了解了经典DDD的架构,你才能 ...

  8. 使用Charles抓取APP之HTTPS请求

    Charles是一款非常好用的抓包工具,通常使用它来进行APP开发抓包调试,尤其是HTTPS请求. 一.安装Charles 去官网(https://www.charlesproxy.com/)下载软件 ...

  9. 使用Jenkins部署Spring Boot项目

    jenkins是devops神器,本篇文章介绍如何安装和使用jenkins部署Spring Boot项目 jenkins搭建 部署分为三个步骤: 第一步,jenkins安装 第二步,插件安装和配置 第 ...

  10. Linux编程 7 (实时监测进程 top， 结束进程kill，killall)

    一. 实时监测进程 top 在一篇里讲到ps命令在收集进程信息时非常有用,但它只能显示某个特定时间点的信息.想要观察那些频繁换进换出的内存进程趋势,用top命令是合适的.使用top命令如下图所示: 在 ...