<!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. bootstrap 日期控件常用选项

    使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...

  2. Python网络爬虫案例（二）——爬取招聘信息网站

    利用Python,爬取 51job 上面有关于 IT行业 的招聘信息 版权声明:未经博主授权,内容严禁分享转载 案例代码: # __author : "J" # date : 20 ...

  3. TensorFlow 之 手写数字识别MNIST

    官方文档: MNIST For ML Beginners - https://www.tensorflow.org/get_started/mnist/beginners Deep MNIST for ...

  4. 乘积最大|2018年蓝桥杯B组题解析第十题-fishers

    标题:乘积最大 给定N个整数A1, A2, ... AN.请你从中选出K个数,使其乘积最大. 请你求出最大的乘积,由于乘积可能超出整型范围,你只需输出乘积除以1000000009的余数. 注意,如果X ...

  5. FJNUOJ Yehan’s hole（容斥求路径数 + 逆元）题解

    Description Yehan is a angry grumpy rabbit, who likes jumping into the hole. This day,Yehan jumps ag ...

  6. 【Map】Echarts之iphone销量地图的使用以及详细配置

    1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language=" ...

  7. json对象与javaBean，String字符创之间相互转换的方法

    原创:转载请注明出处 package com.allcam.system.utils; import com.fasterxml.jackson.databind.ObjectMapper; publ ...

  8. Ubuntu 12.04 安装JDK

    为了在Ubuntu上安装好eclipse,按照步骤先进行JDK的安装. (1) 新建java文件夹 命令行操作: (2) 下载解压JDK安装包后无法移动文件夹至File System 移动时提示:Pe ...

  9. SPOJ 375 Query on a tree（树链剖分）

    https://vjudge.net/problem/SPOJ-QTREE 题意: 给出一棵树,树上的每一条边都有权值,现在有查询和更改操作,如果是查询,则要输出u和v之间的最大权值. 思路: 树链剖 ...

  10. 安装labelImage的问题qt

    不知为何需要些source ~/.bash_profile才 自己在 ~/.bash_profile 中配置环境变量, 可是每次重启终端后配置的不生效.需要重新执行 : $source ~/.bash ...