<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>html5 canvas从圆开始</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

	canvasApp();

}

function canvasSupport(){

	return Modernizr.canvas;

}

function canvasApp(){

	if(!canvasSupport()){

		return;

	}else{

		var theCanvas = document.getElementById('canvas')

		var context = theCanvas.getContext("2d")

	}

	drawScreen();

    function drawScreen(){

		//颜色粉色，线宽10,

		 context.beginPath();

	         context.strokeStyle="red";

                 context.lineWidth=4;

		 context.lineTo(100,200);

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

		 context.stroke();

		 context.closePath();

		 //以下为了给个直观的感觉，画的参考线

		 context.beginPath();

		 context.strokeStyle="#ddd";

		 context.lineWidth=2;

		 context.moveTo(0,350);

		 context.lineTo(350,350);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(350,0);

		 context.lineTo(350,350);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(100,0);

		 context.lineTo(100,100);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(0,100);

		 context.lineTo(100,100);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(350,350);

		 context.lineTo(100,200);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(100,100);

		 context.lineTo(350,350);

		 context.stroke();

		 context.closePath();

   }

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</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. 腾讯/阿里/百度 BAT人才体系的职位层级、薪酬、晋升标准

    互联网圈有这么一句话:百度的技术,阿里的运营,腾讯的产品.那么代表互联网三座大山的BAT,内部人才体系有什么区别呢?今天老李就带领大家看一看~ ★ 腾讯 ★   1. 职级 腾讯职级体系分6级,最低1 ...

  2. 【阿里巴巴】CBU技术部招聘

    如果你偏爱技术挑战,希望成就不一样的自己,欢迎投递简历至 yangyang.xiayy@alibaba-inc.com [业务简介] B2B内贸www.1688.com:1688.com是最大的内贸B ...

  3. GitHub笔记（一）——本地库基础操作

    零.基础概念理解——可以访问廖雪峰老师的网站https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c01 ...

  4. p4语言编程环境安装

    p4语言主要是用来模拟交换机的交互,是新一代的SDN解决方案,可以让数据转发平面也具有可编程能力,让软件能够真正定义网络和网络设备.详细介绍 主要流程是:安装vmware.安装Ubuntu.下载Git ...

  5. webpack4-用之初体验，一起敲它十一遍

    众所周知,webpack进入第4个大版本已经有2个月的时间了,而且webpack团队升级更新的速度也是非常的惊人 在写下如下内容的时候webpack已经出到了4.6的版本了,剑指5.0应该是指日可待了 ...

  6. PAT甲题题解-1103. Integer Factorization (30)-（dfs）

    该题还不错~. 题意:给定N.K.P,使得可以分解成N = n1^P + … nk^P的形式,如果可以,输出sum(ni)最大的划分,如果sum一样,输出序列较大的那个.否则输出Impossible. ...

  7. 第三次作业--导入excel表格（完整版）

    031302322 031302316 将教师排课表导入系统 使用powerdesigner设计数据库表格 设计概念模型 打开new -> Conceptual Data Model创建概念模型 ...

  8. Daily Scrum - 11/13

    时间:3:00pm - 3:30pm 今天小组例会主要是任烁分享他对WP源码的code review,通过分析与讨论我们了解了背单词模块的主要类(主要是词和单词本),取词方式(调用数据库接口),算法( ...

  9. ELK Stack (2) —— ELK + Redis收集Nginx日志

    ELK Stack (2) -- ELK + Redis收集Nginx日志 摘要 使用Elasticsearch.Logstash.Kibana与Redis(作为缓冲区)对Nginx日志进行收集 版本 ...

  10. Alpha冲刺——day6

    Alpha冲刺--day6 作业链接 Alpha冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602634 ...