<!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. 批量插入数据, 将DataTable里的数据批量写入数据库的方法

    大量数据导入操作, 也就是直接将DataTable里的内容写入到数据库 通用方法: 拼接Insert语句, 好土鳖 1. MS Sql Server:   使用SqlBulkCopy 2. MySql ...

  2. [UWP]不那么好用的ContentDialog

    ContentDialog是UWP开发中最常用的组件之一,一个体验良好的UWP应用很难避免不去使用它.博客园里也有许多的文章介绍如何来利用ContentDialog实现各种自定义样式的弹窗界面.不过实 ...

  3. Android交流会-碎片Fragment，闲聊单位与尺寸

    女孩:又周末了哦~ 男孩:那么今日来开个交流会,我们也学一学人家高大尚的大会,自己开一个,广州站,Android开发攻城狮交流会~ 1.Fragment概要: Android从3.0开始引入了Frag ...

  4. Spring Cloud Finchley 正式发布，包含 4 个重大更新！

    在 Spring 的官方博客上已经看到 Spring Cloud Finchley 在 06 月 19 日这一天正式发布了,我们在 Maven 中央仓库也看到了最新版的更新. Finchley 正式版 ...

  5. 干货：教你如何监控 Java 线程池运行状态

    之前写过一篇 Java 线程池的使用介绍文章<线程池全面解析>,全面介绍了什么是线程池.线程池核心类.线程池工作流程.线程池分类.拒绝策略.及如何提交与关闭线程池等. 但在实际开发过程中, ...

  6. 测试工具之RobotFramework界面基本功能使用

    安装好RobotFramework后,直接在运行或者命令行中执行ride.py即可启动RF 启动完成后的界面如下: 界面很简洁,然后我们开始点击file并创建project: 接下来右键project ...

  7. odoo开发笔记 -- 日常开发注意点总结（持续补充）

    (1) odoo视图字段,如果是readonly,默认该数据是不会往后台传递的,因此,保存数据的时候,该字段的数据是不会存到数据库中的.(待确认,字段中增加默认值,保存) (2)视图界面,注释的时候, ...

  8. 课程四(Convolutional Neural Networks)，第三 周（Object detection） —— 2.Programming assignments：Car detection with YOLOv2

    Autonomous driving - Car detection Welcome to your week 3 programming assignment. You will learn abo ...

  9. 用C#学习数据结构之链表

    单链表的定义 链表是用一组任意的存储单元来存储线性表中的数据元素(这组存储单元可以是连续的,也可以是不连续的).那么,怎么表示两个数据元素逻辑上的相邻关系呢?即如何表示数据元素之间的线性关系呢?为此, ...

  10. Java集合类常见面试知识点总结

    微信公众号[Java技术江湖]一位阿里Java工程师的技术小站 Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾. 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java ...