<!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. Redis 如何保持和MySQL数据一致【一】

    1. MySQL持久化数据,Redis只读数据redis在启动之后,从数据库加载数据.读请求:不要求强一致性的读请求,走redis,要求强一致性的直接从mysql读取写请求:数据首先都写到数据库,之后 ...

  2. yum配合rpm查看软件包安装位置

    今天安装apache,新版本要求除了apache的安装包以外,还要求先安装apr.apr-util和pcre. 开始并没有急着去下载apr的安装包,而是想看看我的操作系统中有没有安装过了这个软件,结果 ...

  3. Android 深入理解Activity 页面Intent跳转

  4. String & dp Problem Round 3 2017.4.22

    对每一个特征求前缀和,如果它减去前面的某一个地方的和,得到的每个特征是相等的,那么然后就可以更新答案. 需要解决这个两个问题 1.如何使答案尽量大? 这个很简单,直接找尽量靠前的地方就好了. 2,如何 ...

  5. linux下使用docker-thunder-xware进行离线下载

    1.环境: lsb_release -a hello@jhello:~$ lsb_release -aNo LSB modules are available.Distributor ID: Ubun ...

  6. POJ 3687 Labeling Balls（拓扑排序）题解

    Description Windy has N balls of distinct weights from 1 unit to N units. Now he tries to label them ...

  7. Jedis和JAVA对象的序列化和反序列化的使用

    1. Jedis版本: jedis-2.6.2.jar 背景:现在系统提供portal接口服务,使用JDBC直接查询数据库,使用jedis提供的缓存功能,在JDBC前面加上Redis,先从Redis中 ...

  8. 【Hostname】Linux修改主机名称

    环境:CentOS 6.5 方式一: 1.修改hosts文件 vi /etc/hosts 将本机ip地址后面的hostname改掉 2.修改network文件 vi /etc/sysconfig/ne ...

  9. v-if和v-show区别

    v-if和v-show区别 v-if判断是否要加载,可以减轻服务器压力,按需加载. v-show 利用了css的display,可以提高客户端的流畅度. 看需求使用那个,如果页面上会经常用到,用v-s ...

  10. The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 解决方法

    项目忽然出现 The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Pat ...