<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 画圆 arc( 圆心的横坐标, 圆心的纵坐标, 半径的长度, 绘制的起始角度, 绘制的终结角度, 是否逆时针 )

     * 圆弧 arcTo(第一个控制点的横坐标, 第一个个控制点的纵坐标, 第二个人控制点的横坐标, 第二个控制点的纵坐标, 圆弧的半径)

     */

    /*

    cxt.arc(500, 300, 100, 0, 2*Math.PI, false);

    cxt.fill();

    */

    cxt.save();

    cxt.lineWidth = 3;

    cxt.strokeStyle = 'red';

    cxt.moveTo(100, 100);

    cxt.arcTo(700, 100, 700, 500, 300);

    cxt.stroke();

    cxt.restore();

    /**

     * 辅助线

     */

    cxt.strokeStyle = 'green';

    cxt.moveTo(100, 100);

    cxt.lineTo(700, 100);

    cxt.lineTo(700, 500);

    cxt.stroke();

</script>

HTML5 Canvas ( 圆和切点曲线的绘制 ) arc, arcTo的更多相关文章

  1. HTML5 Canvas（基础知识）

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  2. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  3. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  4. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  5. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  6. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  7. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

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

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

  9. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

随机推荐

  1. （3）什么是函数(函数的定义、形参、实参、默认形参、可变长函数args|kwargs)

    什么是函数 函数是指将一组语句的集合通过一个名字(函数名)封装起来,想要执行这个函数,只需调用其函数名即可 1.减少重复代码 2.使程序变的可扩展 3.使程序变得易维护 定义函数的语法 形参 主要的作 ...

  2. Android中logcat和日志打印

     一.logcat对日志过滤 1.# logcat --help # logcat --help Usage: logcat [options] [filterspecs] options inclu ...

  3. PYTHON之MOCK WEB接口

    在日常的测试工作中,有时会有需要调用外部接口,拿到返回数据用以满足当前的测试任务的需求.但是当外部接口不可用,或者没有提供测试用环境时,我们就需要自己来mock一个接口的返回内容了,先让我们看一看下面 ...

  4. Mac OSX 正确地同时安装Python 2.7 和Python3

    出处:http://www.jianshu.com/p/51811fa24752 python3 默认安装位置:/usr/local/Cellar/python3

  5. linux 命令：chmod权限设置命令

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...

  6. 洛谷 3706 [SDOI2017]硬币游戏——思路

    题目:https://www.luogu.org/problemnew/show/P3706 题解:https://blog.csdn.net/gjghfd/article/details/80355 ...

  7. go get中的...

    go get命令是go自带的包下载工具. 如果配置了GOPATH,下载的文件放置于GOPATH/src下面 例如 $ go get github.com/garyburd/redigo/redis $ ...

  8. MySQL索引分类和各自用途

    一. MySQL: 索引以B树格式保存 Memory存储引擎可以选择Hash或BTree索引,Hash索引只能用于=或<=>的等式比较. 1.普通索引:create index on Ta ...

  9. 重置SQL Server sa密码

    查询分析器,连接时,身份验证使用"使用windows身份验证" 然后,执行: EXEC sp_password NULL, '新密码', 'Sa'

  10. jQuery数组处理详解（转载）

    1. $.each(array, [callback]) 遍历[常用]解释: 不 同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥 ...