Canavs arcTo方法的理解

Canavs arcTo方法的理解

arcTo方法有四个參数

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

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

<span>Canavs arcTo方法的理解</span>

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

<!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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/119238.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 西数移动硬盘无法读取(高枕无忧的成语)

    原标题:让你的秘密高枕无忧WDMyPassport随行版移动硬盘评测现在是一个数据爆炸的时代,游戏厂商所制作的游戏容量越来越大,短视频风靡我们拍出来的短片越来越多,生活工作中的重要资料更是要好好保存。所以移动硬盘是必备的,一款高速、轻薄、大存储的移动硬盘能改变我们的存储生活。这次入手这款WDMyPassport随行版移动硬盘外观设计小巧轻薄,同时读写速度都在100MB/S左右,还有密码保…

  • java获取当前年月日时间戳_现在的年月日怎么来的

    java获取当前年月日时间戳_现在的年月日怎么来的两种方法,通过Date类或者通过Calendar类。Date类比较简单,但是要得到细致的字段的话Calendar类比较方便。importjava.text.DateFormat;importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;importjava.util.L

  • 2021pycharm最新激活码【2021免费激活】「建议收藏」

    (2021pycharm最新激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~00OE5RWT28-eyJsaWNlbnNlSWQiOi…

  • export在linux中用法_from . import

    export在linux中用法_from . import镜像下载、域名解析、时间同步请点击阿里云开源镜像站export命令用于将shell变量输出为环境变量,或者将shell函数输出为环境变量。一个变量创建时,它不会自动地为在它之后创建的shell进程所知。而命令export可以向后面的shell传递变量的值。命令语法export[参数]命令参数-f:指向函数。-n:删除变量的导出属性。-p:显示全部拥有导出属性的变量。-pf:显示全部拥有导出属性的函数。-nf:删除函数的导出属性。列出当前所有的环境变量>expo

  • setScale,preScale 和 postScale 的区别

    setScale,preScale 和 postScale 的区别setScale,preScale和postScale的区别上面讲到,Matrix由3*3矩阵中9个值来决定。而我们对Matrix的所有设置,也是对这9个值的各种不同的改变,来达到我们想要的效果。下面是Matrix3*3的矩阵结构{MSCALE_X,MSKEW_X,MTRANS_X,MSKEW_Y,MSCALE_Y,MTRANS_Y,MPERSP_0,MPERSP_1,MPERSP_2}一、首先介绍Scale缩放的控制scale就是缩放,我们调用Matrix的setScale、preSc

    2022年10月20日
  • 一个多道批处理仅有p1p2_nx300h的缺点

    一个多道批处理仅有p1p2_nx300h的缺点(注:%0就是该batch文件的文件名 )%~dp0的意思是 更改当前目录为批处理文件的目录 比如你有个批处理a.bat在D:/qq文件夹下  a.bat内容为 cd/d%~dp0 在这里 cd/d%~dp0的意思就是cd/dd:/qq %0代表批处理本身 d:/qq/a.bat ~dp是变量扩充 d既是扩充到分区号 d: p就是扩充到路径 

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号