<!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. HCNP学习笔记之IP地址、子网掩码、网关的关系

      0x00 概述 网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置. 以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 ...

  2. Python入门之logging日志模块以及多进程日志

    本篇文章主要对 python logging 的介绍加深理解.更主要是 讨论在多进程环境下如何使用logging 来输出日志, 如何安全地切分日志文件. 1. logging日志模块介绍 python ...

  3. 20145321 《网络对抗技术》 MSF基础应用

    20145321 <网络对抗技术> MSF基础应用 实验内容 掌握metasploit的基本应用方式以及常用的三种攻击方式的思路 主动攻击,即对系统的攻击,不需要被攻击方配合,这里以ms0 ...

  4. 20145315何佳蕾《网络对抗》MSF基础应用

    20145315何佳蕾<网络对抗>MSF基础应用 实验过程记录 (1)一个主动攻击,ms08_067; 1.打开msfconsole 2.use exploit/windows/smb/m ...

  5. STM32.printf

    printf("\r\n this is a usart printf demo \r\n"); Use Micro LIB 需要勾选这个库 将串口定义成 printf 函数 #i ...

  6. C++ 细小知识点

    1. C++ 拷贝构造函数参数为const类型 原因:因为复制构造函数是用引用方式传递复制对象,引用方式传递的是地址,因此在构造函数内对该引用的修改会影响源对象,防止源对象被修改,就要把参数类型设为c ...

  7. Delphi XE5 for Android （四）

    在Delphi中窗体与窗体之间的交互与调用非常简单,在FMX中这个优势得到了充分体现,先建立一个主窗体和一个需要调用的窗体:       在主窗体上放的按钮事件如下: - private   { Pr ...

  8. UVA 11426 GCD - Extreme (II) （欧拉函数）题解

    思路: 虽然看到题目就想到了用欧拉函数做,但就是不知道怎么做... 当a b互质时GCD(a,b)= 1,由此我们可以推出GCD(k*a,k*b)= k.设ans[i]是1~i-1与i的GCD之和,所 ...

  9. 【概念、概述】Spark入门教程[1]

    本教程源于2016年3月出版书籍<Spark原理.机制及应用> ,如有兴趣,请支持正版书籍. 随着互联网为代表的信息技术深度发展,其背后由于历史积累产生了TB.PB甚至EB级数据量,由于传 ...

  10. java 如果仅输出一位和要输出多位格式的输出问题,利用boolean值.

    package com.ykmimi.testtest; /** * 第七周第二题,来自网络 */ import java.util.Scanner; public class NumberPerfe ...