<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>arcTo示意</title>
  
</head>
<body>
    <canvas id="ourCanvas" width="500" height="500" style="border:3px dashed #0094ff"></canvas>
   <script>
       /*该方法表示绘制多个路径
       n表示个数
       dx、dy控制n角星的位置
       size控制n角星的大小

*/
       function createStar(context,n,dx,dy,size) {
           //开始创建路径
           context.beginPath();
           var dig = Math.PI / n * 4;
           for (var i = 0; i < n; i++) {
               var x = Math.sin(i * dig);
               var y = Math.cos(i * dig);
               context.lineTo(x * size + dx, y * size + dy);
            
           }
           context.closePath();
       }
       var canvas = document.getElementById("ourCanvas");
       var ctx = canvas.getContext("2d");
       createStar(ctx, 3, 60,60, 50);
       ctx.fillStyle = "#ff0";
       ctx.fill();

createStar(ctx, 5, 100, 150, 60);
       ctx.fillStyle = "#f00";
       ctx.fill();

createStar(ctx, 9, 100,280, 80);
       ctx.fillStyle = "#ccc";
       ctx.fill();
    </script>
</body>
</html>

arcTo的更多相关文章

  1. canvas arcTo()用法详解

    CanvasRenderingContext2D对象的方法arcTo()的用法. arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点.端点1(x1,y1)和端 ...

  2. arcTo 画 狐行

    <!DOCTYPE HTML><head> <meta charset = "utf-8"> <title>starGirl< ...

  3. 绘制相切弧arcTo

    绘制相切弧 语法: CanvasRenderingContext2D.arcTo( x1, y1, x2, y2, radius ) 描述: 该方法用于绘制圆弧 绘制的规则是当前位置与第一个参考点连线 ...

  4. canvas对象arcTo函数的使用-遁地龙卷风

    (-1)环境说明 我使用的浏览器是chrome49 (1)详细介绍 $(function() { var context = lol.getContext("2d"); conte ...

  5. Android中moveTo、lineTo、quadTo、cubicTo、arcTo详解（实例）

    1.Why 最近在写android画图经常用到这几个什么什么To,一开始还真不知道cubicTo这个方法,更不用说能不能分清楚它们了,所以特此来做个小笔记,记录下moveTo.lineTo.quadT ...

  6. canvas arcTo()用法详解 – CodePlayer

    canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解

  7. Canvas arcTo绘制圆弧

    arcTo(x1,y1,x2,y2,r); 当前点x0,y0;圆弧与(x0,y0-x1,y1)相切,与(x1,y1-x2,y2)相切: <!DOCTYPE html> <html l ...

  8. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  9. html5 canvas arcTo()

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 关于QT的QPainterPath::arcTo 详解

    这个函数文档的意思就是画弧,看了文档也不太明白,自己做了demo终于明白了意思 移动到圆心,画180度半圆 void TestArcTo::paintEvent(QPaintEvent *) { QP ...

随机推荐

  1. linux内核分析 第三周

    一.Linux内核源码(简单分析) README 一开始刚接触内核源码的时候,不知道代码文件是什么功能.不清楚如何使用文件的时候,就需要打开README. README提供了内核的各种编译方法.生成文 ...

  2. mac OSX 实用快捷键

    Command + shift + G. 前往文件夹 按键 效果 Shift + option + 音量+/- 以四分之一的刻度加 / 减音量 Shift. + option + 9 ······

  3. Educational Codeforces Round 21 Problem A - C

    Problem A Lucky Year 题目传送门[here] 题目大意是说,只有一个数字非零的数是幸运的,给出一个数,求下一个幸运的数是多少. 这个幸运的数不是最高位的数字都是零,于是只跟最高位有 ...

  4. NOIP 华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  5. 联合权值dp

    联合权值 洛谷中可找到 题目传送门https://www.luogu.org/problemnew/show/P1351 这题我就得了70分(TLE)  GG了 就是遍历它孩子的孩子(爷爷和孙子),然 ...

  6. Java LinkedList源码剖析

    LinkedList 本文github地址 总体介绍 LinkedList同时实现了List接口和Deque接口,也就是说它既可以看作一个顺序容器,又可以看作一个队列(Queue),同时又可以看作一个 ...

  7. gulp常用命令

    gulp 默认的执行的命名文件为gulpfile 换成其他命名就识别不了 因为需要安装两次gulp或者说其他插件,一个是全局-g安装一个是本地目录安装, 本地目录安装时目录移动或者名字被改变就会失效提 ...

  8. Android程序示例

    目录 Android代码示例 OptionsMenu ImageButton CheckBox & RadioButton Context Menu快捷菜单 Key Event ListVie ...

  9. 获取客户端真实ip地址(无视代理)

    /// <summary> /// 获取客户端IP地址(无视代理) /// </summary> /// <returns>若失败则返回回送地址</retur ...

  10. 视图层view layer

    视图层是Django处理请求的核心代码层,我们大多数Python代码都集中在这一层面. 它对外接收用户请求,对内调度模型层和模版层,统合数据库和前端,最后根据业务逻辑,将处理好的数据,与前端结合,返回 ...