<!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. Springboot集成mybatis(mysql),mail,mongodb,cassandra,scheduler,redis,kafka,shiro,websocket

    https://blog.csdn.net/a123demi/article/details/78234023  : Springboot集成mybatis(mysql),mail,mongodb,c ...

  2. (转）函数库调用 VS 系统调用

    Linux下对文件操作有两种方式:系统调用(system call)和库函数调用(Library functions).可以参考<Linux程序设计>(英文原版为<Beginning ...

  3. string str将str转字符数组以及字符数组初始化

    c和指针(<pointers on c>) 8.1.11 一个字符串,如"hello",一般为字符串常量,可以用它对字符指针赋值,或初始化,相当于把这个字符串常量的首地 ...

  4. 通过torodb && hasura graphql 让mongodb 快速支持graphql api

    torodb 可以方便的将mongo 数据实时同步到pg,hasura graphql 可以方便的将pg 数据暴露为graphql api,集成在一起真的很方便 环境准备 docker-compose ...

  5. 一、PowerDesigner概述(系统分析与建模)

     PowerDesigner概述 PowerDesigner是Sybase公司推出的一个集成了企业架构,UML(统一建模语言)和数据库的CASE(计算机辅助软件工程)工具.它不仅可以用于系统设计和开发 ...

  6. python之 列表常用方法

    更多列表的使用方法和API,请参考Python文档:http://docs.python.org/2/library/functions.html append:用于在列表末尾追加新对象: # app ...

  7. h5 的 audio 标签知识点

    因为音频格式有版权,各浏览器使用不同的音频格式. 音频格式兼容性 音频格式 Chrome Firefox IE9 Opera Safari MP3 支持 不支持 支持 不支持 支持 OGG 支持 支持 ...

  8. 客户端用javascript获取grid的数据。

  9. JZ2440 裸机驱动 第13章 LCD控制器(2)

    13.2 TFT LCD显示实例 13.2.1 程序设计     本实例的目的是从串口输出一个菜单,从中选择各种方法进行测试,比如画线. 画圆.显示单色.使用调色板等. 13.2.2代码详解     ...

  10. SpringCloud统一配置之使用配置

    配置的读取方式在上一篇文章中有提到. 取到值之后赋值给静态类里的静态变量. 因为SpringCloud项目启动的时候会把所有的api都执行一遍(相当蛋疼),所以这里直接就可以写一个方法进行赋值. 代码 ...