<!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. cuda+ffmpeg+opengl解码rtsp h264码流多路

    Cuda 解码 全尺寸 解码 .全尺寸窗口绘制测试( 分别 测试 视频 文件和 IP 相机 实时视频 ) 1080 p 视屏 文件 全尺寸 解码 全尺寸 显示 72 0p IP 相机 全尺寸 解码 全 ...

  2. test20181004 苹果树

    题意 分析 对每个点维护子树所能达到的dfn最大值.最小值.次大值.次小值,然后就可以计算原树中每个点与父亲的连边对答案的贡献. 如果子树中没有边能脱离子树,断掉该边与任意一条新加的边都成立,答案就加 ...

  3. day 2克隆虚拟机器minimal需要注意的问题和制作本地yum源和常用的Linux的命令

    ------- 克隆bee2 PS:因为复制机器后,又多了一个网卡eth1.本来只有一个网卡eth0,下面是解决方案. 解决克隆后eth0不见的问题 1.直接修改vi  /etc/sysconfig/ ...

  4. Make menuconfig生成文件

    1.当我们在执行make menuconfig这个命令时,一共涉及到了以下几个文件: Linux内核根目录下的scripts文件夹 arch/$ARCH/Kconfig文件.各层目录下的Kconfig ...

  5. golang 自定义importpath

    golang 的包导入和其他语言有好多不一样的地方,以下是一个自定义的导入 golang 自定义导入说明 一个官方的说明 比较简单,就不翻译了,主要是说我们可以通过添加meta 数据告诉包如何进行加载 ...

  6. Oracle删除归档文件

    归档文件过大,会导致数据库出现异常,无法登陆. 1.D盘下新建一个delete_arch.txt文件 connect target / run { DELETE ARCHIVELOG ALL COMP ...

  7. Oracle 基础知识入门

    前记: 近来项目用到Oracle数据库,大学学了点,后面基本忘记得差不多了,虽然基本语法跟sql 差不多,但是oracle知识是非常多的. 这里简单说点基础知识,希望后面补上更多的关于ORacle知识 ...

  8. 2019第1周日-MQ选型要点

    用消息中间件犹如小马过河,选择合适的才最重要,这需要贴合自身的业务需求,技术服务于业务.具体在选择上可从下面功能.性能.可靠性和可用性.运维管理.社区和生态.团队技术栈等维度来进行筛选. 具体技术选型 ...

  9. oracle之 获取建表ddl语句

    第一种方法是使用工具,如:pl/sql developer,在[工具]--[导出用户对象]出现就可以得到建表脚本. 第二种方法是,sql语句. DBMS_METADATA.GET_DDL包可以得到数据 ...

  10. webpack externals

    当我们想在项目中require一些其他的类库或者API,而又不想让这些类库的源码被构建到运行时文件中,这在实际开发中很有必要.此时我们就可以通过配置externals参数来解决这个问题: //webp ...