<!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. python中hasattr, getattr,setattr及delattr四个方法

    通过一个实例来说明,这四个函数的用法: 首先一个如下的一个简单的类: class Animal(object): def __init__(self,name, zone): self.name = ...

  2. bzoj1641 / P2888 [USACO07NOV]牛栏Cow Hurdles

    P2888 [USACO07NOV]牛栏Cow Hurdles Floyd $n<=300$?果断Floyd 给出核心式,自行体会 $d[i][j]=min(d[i][j],max(d[i][k ...

  3. bzoj1639 / P2884 [USACO07MAR]每月的费用Monthly Expense

    P2884 [USACO07MAR]每月的费用Monthly Expense 二分经典题 二分每个段的限制花费,顺便统计下最大段 注意可以分空段 #include<iostream> #i ...

  4. C++ tinyXml直接解析XML字符串

    转载:http://www.cnblogs.com/1024Planet/p/4401929.html <?xml version=\"1.0\" encoding=\&qu ...

  5. object Add(object Before, object After, object Count, object Type);

    [表达式] .Add(Before, After, Count, Type) [表达式] 一个代表 Sheets 对象的变量. Before指定工作表的对象,新建的工作表将置于此工作表之前. Afte ...

  6. requirejs概念

  7. $.cookie()取值设置

    本文为博主原创,未经允许不得转载: 使用jquery.cookie.js中的cookie做了一个折叠式菜单栏,用cookie保存会话的值,其中的值为点击菜单栏时,即在cookie中 保存对应的值,保证 ...

  8. HDU 1083 Courses（二分图匹配模板）

    http://acm.hdu.edu.cn/showproblem.php?pid=1083 题意:有p门课和n个学生,每个学生都选了若干门课,每门课都要找一个同学来表演,且一个同学只能表演一门课,判 ...

  9. mark一下总是记混的重定向与转发的区别

    forward内部跳转 和redirect重定向跳转的区别 1).从地址栏显示来说  forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发 ...

  10. python 集合元素添加

    #A new empty set color_set = set() color_set.add("Red") print(color_set) #Add multiple ite ...