<!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. Ubuntu Linux下的Wireshark使用drcom_2011.lua分析drcom协议

    用文本编辑器打开init.lua配置文件,位置一般是//usr/share/wireshark/init.lua: sudo vim /usr/share/wireshark/init.lua 在in ...

  2. Oracle connect resource权限

    connect resource权限:grant connect,resource to user;后用户包括的权限:CONNECT角色: --是授予最终用户的典型权利,最基本的ALTER SESSI ...

  3. Windows环境下用jwplayer+Nginx搭建视频点播服务器

    flv视频可以采用两种方式发布: 一.普通的HTTP下载方式 二.基于Flash Media Server或Red5服务器的rtmp/rtmpt流媒体方式. 多数知名视频网站都采用的是前一种方式. 两 ...

  4. /etc/inittab 学习

    1.文件内容 2.内容讲解 http://www.2cto.com/os/201108/98426.html init的进程号是1(ps -aux | less),从这一点就能看出,init进程是系统 ...

  5. bat根据星期启动程序

    原来公司里的由于每次开机时启动的程序比较多,所以打算使用批处理程序,这里只列举了部分.在每周一到周五的时候,开机则启动指定的应用程序,如果是周末的两天则不启动任何程序,所以做了这个脚本.你如果需要,根 ...

  6. 复制IE缓存里多个文件的方法

    IE8缓存地址可以自己设置,要复制里面的文件,需要点小技巧: 真正的文件在E:\baidu download\Internet 临时文件\content.ie5下面:E:\baidu download ...

  7. asm数据文件迁移(os–>asm)

    --添加测试表空间 SQL> create tablespace xff datafile '/u01/oradata/xifenfei.dbf' size 10m autoextend on ...

  8. ES6之6种遍历对象属性的方法

    ES6之6种遍历对象属性的方法 for ... in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). Obejct.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可 ...

  9. bzoj 3572 [Hnoi2014]世界树——虚树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3572 关于虚树:https://www.cnblogs.com/zzqsblog/p/556 ...

  10. Angular 4.0 安装组件

    安装组件 ng g componet 组件名