arcTo方法有四个參数

參数1,2为第一个控制点的x,y坐标,參数2为第二个控制点的坐标,參数3为绘制圆弧的半径.

起点和第一个控制点组成的延长线与第一个控制点和第二个控制点组成的延长线都是和圆弧相切的,这个圆弧也就是被夹在两条延长线中间.圆越大，两条延长线能形成的角度能夹住的圆弧就越小.

以下写了一个简单的动画帮助理解

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

canvas {

	width: 400px;

	height: 400px;

	background-color: #EEEEEE;

}

</style>

<script>

	window.onload = function() {

		var canvas = document.getElementById('canvas');

		var arcToPoint1 = {x:120, y:40};

		var arcToPoint2 = {x:60, y:80}

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

		if (!canvas || !canvas.getContext) {

			return;

		} else {

			timer = setInterval(function(){

				if (arcToPoint2.x < 150) {

					arcTo (context, arcToPoint1, arcToPoint2);

					arcToPoint2.x += 2;

				} else {

					clearInterval(timer);

				}

			}, 300);

		}

	}

	function arcTo () {

		var startPoint = {x: 20, y: 40};

		var context = arguments[0];

		var arcToPoint1 = arguments[1];

		var arcToPoint2 = arguments[2];

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

		context.clearRect(0,0,context.canvas.width, context.canvas.height)

		context.beginPath();

		context.moveTo(startPoint.x, startPoint.y);

		context.strokeStyle = "red";

		context.lineWidth = 1;

		context.arcTo(arcToPoint1.x, arcToPoint1.y, arcToPoint2.x, arcToPoint2.y, 40);

		context.stroke();

		context.beginPath();

		context.moveTo(startPoint.x, startPoint.y);

		context.strokeStyle = "black";

		context.lineWidth = 1;

		context.lineTo(arcToPoint1.x, arcToPoint1.y);

		context.fillText('arcToPoint1', arcToPoint1.x + 10, arcToPoint1.y - 5)

		context.stroke();

		context.beginPath();

		context.moveTo(arcToPoint1.x, arcToPoint1.y);

		context.strokeStyle = "black";

		context.lineWidth = 1;

		context.lineTo(arcToPoint2.x, arcToPoint2.y);

		context.fillText('arcToPoint2', arcToPoint2.x + 10, arcToPoint2.y + 10)

		context.stroke();

	}

</script>

</head>

<body>

	<canvas id="canvas">

		此游览器不支持canvas标签

	</canvas>

</body>

</html>

Canavs arcTo方法的理解的更多相关文章

  1. 转载：JAVA中关于set()和get()方法的理解及使用

    对于JAVA初学者来说,set和get这两个方法似乎已经很熟悉了,这两个方法是JAVA变成中的基本用法,也是出现频率相当高的两个方法. 为了让JAVA初学者能更好的理解这两个方法的使用和意义,今天笔者 ...

  2. [转]Android View.onMeasure方法的理解

    转自:http://blog.sina.com.cn/s/blog_61fbf8d10100zzoy.html Android View.onMeasure方法的理解 View在屏幕上显示出来要先经过 ...

  3. 五种I/O 模式，select、epoll方法的理解，BIO、NIO、AIO理解 相关文章

    一.io方式 Linux网络编程 五种I/O 模式及select.epoll方法的理解 web优化必须了解的原理之I/o的五种模型和web的三种工作模式 五种I/O 模式——阻塞(默认IO模式),非阻 ...

  4. initWithFrame方法的理解

    initWithFrame方法的理解   有时候,知道initWithFrame方法如何用,但是么有弄明白initWithFrame方法到底是什么? 那就通过查资料弄明白.     1. initWi ...

  5. java中set和get方法的理解

    对于JAVA初学者来说,set和get这两个方法似乎已经很熟悉了,这两个方法是JAVA变成中的基本用法,也是出现频率相当高的两个方法. 为了让JAVA初学者能更好的理解这两个方法的使用和意义,今天笔者 ...

  6. 对Vue.js $watch方法的理解

    博主最近对着vue.js的官方教程在自学vue.js,博主自幼愚钝,在教程中真的是好多点都不太理解,接下来要说的这个$watch方法就是其中一个不太理解的点了.咱们先来看一下对于$watch方法在vu ...

  7. Thread线程join方法自我理解

    Thread线程join方法自我理解 thread.join():等待thread线程运行终止,指的是main-thread(main线程)必须等待thread线程运行结束,才能继续thread.jo ...

  8. JAVA中关于set()和get()方法的理解及使用

    对于JAVA初学者来说,set和get这两个方法似乎已经很熟悉了,这两个方法是JAVA变成中的基本用法,也是出现频率相当高的两个方法. 为了让JAVA初学者能更好的理解这两个方法的使用和意义,今天笔者 ...

  9. Catalina.createDigester方法详细理解

    这个方法主要设置(这个方法很重要,贵在理解,虽然还没学过设计模式..) 1.遇到<server>标签时创建StandardServer实例   设置StandardServer类内部的相关 ...

随机推荐

  1. java基础20 StringBuffer缓冲类

    1.概要 StringBuffer 其实就是一个存储字符的容器 字符串特点:字符串是常量;它们创建之后不能更改了字符串一旦发生变化,那么立马创建一个新的对象.注意:字符串的内容不适合频繁修改的,因为一 ...

  2. 一篇文章读懂开源web引擎Crosswalk-《转载》

    前言 Web技术的优势早已被广大应用开发者熟知,比如可与云服务轻松集成,基于响应式UI设计的精美布局,高度的开放性,跨平台能力, 高效的分发与部署等等.伴随着移动互联网的快速发展与HTML5技术的逐步 ...

  3. 通过field:global给子元素添加css样式

    {dede:arclist row=5 typeid=200} <li [field:global runphp=’yes’ name=autoindex](@me==1)?@me=”class ...

  4. Sourcetree配置ssh密钥 - git图形化工具（二）

    这里主要介绍Sourcetree如何导入已经生成好的ssh私钥,如何生成ssh私钥自行百度. 如果Sourcetree没有配置ssh密钥,克隆时会提示如下错误: 仓库类型:这是一个无效的源路径/URL ...

  5. Retrofit + RxJava ＋ OkHttp 让网络请求变的简单-基础篇

    https://www.jianshu.com/p/5bc866b9cbb9 最近因为手头上的工作做完了,比较闲,想着做一些优化.看到以前用的那一套网络框架添加一个请求比较麻烦,并且比较难用,所以想改 ...

  6. CCF CSP 201409-3 字符串匹配

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201409-3 字符串匹配 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那 ...

  7. 关于C语言的几个考试编程题目

    提交要求:1:邮件名称:学号后三位-题目编号-姓名-期中考试.例如:098-1-沈苗-期中考试2:不用附件提交,直接写邮件,内容包括编程思路(写一段自己对题目的认识.思路.技术细节等).源代码.运行结 ...

  8. Java学习笔记之：Struts2.0 环境搭建

    一.介绍 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互. 二 ...

  9. ionic启动App时不使用淡入淡出效果

    找到我们项目下面 res下面的config.xml,然后加入下面两句就可以解决. <preference name="FadeSplashScreen" value=&quo ...

  10. Linux下MySQL主从同步故障："Slave_SQL_Running:No"的解决方法

    故障现象: 进入slave服务器,运行: mysql> show slave status\G          .......              Relay_Log_File: loc ...