1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>html5 canvas从圆开始</title>
  6. <script src="js/modernizr.js"></script>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <script type="text/javascript">
  12. window.addEventListener('load',eventWindowLoaded,false);
  13. function eventWindowLoaded(){
  14. 	canvasApp();
  15. }
  16. function canvasSupport(){
  17. 	return Modernizr.canvas;
  18. }
  19. function canvasApp(){
  20. 	if(!canvasSupport()){
  21. 		return;
  22. 	}else{
  23. 		var theCanvas = document.getElementById('canvas')
  24. 		var context = theCanvas.getContext("2d")
  25.  
  26. 	}
  27. 	drawScreen();
  28.     function drawScreen(){
  29. 		//颜色粉色，线宽10,
  30.  
  31. 		 context.beginPath();
  32. 	         context.strokeStyle="red";
  33.                  context.lineWidth=4;
  34. 		 context.lineTo(100,200);
  35. 		 context.arcTo(350,350,100,100,20);
  36. 		 context.stroke();
  37. 		 context.closePath();
  38.  
  39. 		 //以下为了给个直观的感觉，画的参考线
  40. 		 context.beginPath();
  41. 		 context.strokeStyle="#ddd";
  42. 		 context.lineWidth=2;
  43. 		 context.moveTo(0,350);
  44. 		 context.lineTo(350,350);
  45. 		 context.stroke();
  46. 		 context.closePath();
  47.  
  48. 		 context.beginPath();
  49. 		 context.moveTo(350,0);
  50. 		 context.lineTo(350,350);
  51. 		 context.stroke();
  52. 		 context.closePath();
  53.  
  54. 		 context.beginPath();
  55. 		 context.moveTo(100,0);
  56. 		 context.lineTo(100,100);
  57. 		 context.stroke();
  58. 		 context.closePath();
  59.  
  60. 		 context.beginPath();
  61. 		 context.moveTo(0,100);
  62. 		 context.lineTo(100,100);
  63. 		 context.stroke();
  64. 		 context.closePath();
  65.  
  66. 		 context.beginPath();
  67. 		 context.moveTo(350,350);
  68. 		 context.lineTo(100,200);
  69. 		 context.stroke();
  70. 		 context.closePath();
  71.  
  72. 		 context.beginPath();
  73. 		 context.moveTo(100,100);
  74. 		 context.lineTo(350,350);
  75. 		 context.stroke();
  76. 		 context.closePath();
  77.    }
  78. }
  79.  
  80. </script>
  81. <canvas id="canvas" width="500" height="500">
  82. 你的浏览器无法使用canvas
  83. 如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！
  84. </canvas>
  85. </body>
  86. </html>

context.arcTo(350,350,100,100,20);

x1,y1,x2,y2,radius

首先需要有个路径context.lineTo(100,200);

然后从创建一个小弧线

然后这个过程比较复杂加蛋疼！！！

大概的意思是（x1,y1）到（x2,y2）的路径相切

看着这个图大概能理解了

html5 canvas arcTo()的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  2. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  3. canvas arcTo()用法详解

    CanvasRenderingContext2D对象的方法arcTo()的用法. arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点.端点1(x1,y1)和端 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  6. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  7. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  8. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  9. 学习HTML5 canvas遇到的问题

    学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...

随机推荐

  1. 如何使用淘宝 NPM 镜像，安装CNPM的方法

    npm 版本需要大于 3.0 前提:安装好npm 环境:Linux 直接在linux下输入命令: npm install -g cnpm --registry=https://registry.npm ...

  2. Win10环境配置Bitcoin Core节点

    区块链是当下比较火热的技术,我也来蹭下热度,研究一把Bitcoin Core的技术. 入门篇 一.Bitcoin Core安装 1.下载 一般有2种安装方式:源码编译安装 和 下载现成的安装包安装 源 ...

  3. Github与SmartGit使用说明与建议

    当使用github做协同的时候,我们常常需要在客户端安装相应的软件,SmartGit就是一款非常出色的软件,不过是要付费的,我们可以使用non-commercial版本. Download: http ...

  4. 11.3 Daily Scrum

    今天的会议上,我们重新规划了一下每个人的分工.大家的安卓开发环境已经配置完毕,于是我们便正式开始进入代码编写的阶段. 由于修改了一下分工,之前发布的任务作废,以新发布的任务为准.   Today’s ...

  5. 《Linux内核分析》 第六周

    <Linux内核分析> 第6周 一.进程的描述 1.进程控制块PCB 2.linux下的进程转化图 TASK_RUNNING可以是就绪态或者执行态,具体取决于系统调用 TASK_ZOMBI ...

  6. ELK 性能(3) — 在 Docker 上运行高性能容错的 Elasticsearch 集群

    ELK 性能(3) - 在 Docker 上运行高性能容错的 Elasticsearch 集群 介绍 在 Docker 上运行高性能容错的 Elasticsearch 集群 内容 通常熟悉的开发流程是 ...

  7. Python面向对象高级编程：@property--把方法变为属性

    为了限制score的范围,可以通过一个set_score()方法来设置成绩,再通过一个get_score()来获取成绩,这样,在set_score()方法里,就可以检查参数: >>> ...

  8. Angular中通过$location获取地址栏的参数详解

    Angular中通过$location获取url中的参数 最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研 ...

  9. 前端开发【第5篇：JavaScript进阶】

    语句 复合表达式和空语句 复合表达式意思是把多条表达式连接在一起形成一个表达式 { let a = 100; let b = 200; let c = a + b; } 注意这里不能再块级后面加分号, ...

  10. BZOJ5461 PKUWC2018Minimax（概率期望+线段树合并+动态规划）

    离散化后,容易想到设f[i][j]为i节点权值为j的概率,不妨设j权值在左子树,则有f[i][j]=f[lson][j](pi·f[rson][1~j]+(1-pi)·f[rson][j~m]). 考 ...