<!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. Ordering Tasks 拓扑排序

    John has n tasks to do. Unfortunately, the tasks are not independent and the execution of one task i ...

  2. Struts2重新学习之自定义拦截器（判断用户是否是登录状态）

    拦截器 一:1:概念:Interceptor拦截器类似于我们学习过的过滤器,是可以再action执行前后执行的代码.是web开发时,常用的技术.比如,权限控制,日志记录. 2:多个拦截器Interce ...

  3. /proc/sys/vm/drop_caches 清理缓存

    1. 使用方法 /proc/sys/vm/drop_caches默认是0 # echo 1 > /proc/sys/vm/drop_caches; free pagecache, use# ec ...

  4. MySQL删除超大表操作

    ======================================================================== 问题原因 通常情况下,会使用innodb_file_p ...

  5. dbt 包管理

    dbt 可以方便的支持基于git 的包管理 依赖申明 位置 dbt_project.yml 中的repositories 或者使用packages.yaml 格式 dbt_project.yml: r ...

  6. 【转】每天一个linux命令（52）：ifconfig命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/02/27/2934525.html 许多windows非常熟悉ipconfig命令行工具,它被用来获取网 ...

  7. tomcat和servlet关系

    https://blog.csdn.net/weixin_30531261/article/details/78574410 图不错:https://www.cnblogs.com/fengli999 ...

  8. bzoj 4025 二分图——线段树分治+LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4025 线段树分治,用 LCT 维护链的长度即可.不过很慢. 正常(更快)的方法应该是线段树分 ...

  9. 深入理解ASP.NET MVC（目录）

    学ASP.NET MVC2有一段时间了,也针对性的做了个练习.感觉这个框架还是不错的,所以决定要深入系统的学习一下.看到这样一本书: 作者博客:http://blog.stevensanderson. ...

  10. GNU C与ANSI C的不同

    引用:http://tsroad.lofter.com/post/376316_57ac519 1.GNU C可定义0长度数组,目的是为了定义可变长结构体. struct var_struct{    ...