绘制路径

2D上下文支持许多在画布上绘制路径的方法

通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径

然后再通过下列的方法绘制路径:

  • arc(x,y,半径,起始角度,结束角度,旋转方向):     用于绘制圆形路径,以(x,y)为圆心,旋转方向为一个bool值表示是否以逆时针方向绘制,起始角度以及结束角度的单位都是弧度
  • arcTo(x1,y1,x2,y2,半径):                       从(x1,x2)为起点绘制一条到(x2,y2)的弧线,且该圆弧的半径为指定值
  • bezierCurveTo(c1x,c1y,c2x,c2y,x,y):               从上一个点为起点绘制一条到(x,y)点的曲线,并且以(c1x,c1y)和(c2x,c2y)两点为控制点(即绘制贝塞尔曲线)
  • lineTo(x,y):                                                       从上一点绘制一条到(x,y)点的直线
  • moveTo(x,y):                                                    起点移到(x,y)点,不画线
  • quadraticCurveTo(cx,cy,x,y):                           从上一点绘制一条到(x,y)点的二次曲线,以(cx,cy)为控制点
  • rect(x,y,width,height):                                      从点(x,y)开始绘制一个矩形,宽度为 width 高度为 height,这里绘制的是矩形路径,而不是一个独立的形状

当路径绘制完成后有几种不同的操作:

  • closePath(): 如果希望绘制一条连接到路径起点的线条则可以调用该方法
  • fill(): 用fillStyle来填充图形
  • stroke(): 对路径描边
  • clip(): 在路径上创建一个剪切区域

例如如果我们希望在canvas中绘制一个时钟,可以使用以下代码:

var drawing  = document.getElementById("drawing");

// 确定浏览器对canvas的支持
if(drawing.getContext){
var context = drawing.getContext("2d"); // 开始路径
context.beginPath(); // 绘制外圆
context.arc(100,100,99,0,2*Math.PI,false); // 绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false); // 绘制分针
context.moveTo(100,100);
context.lineTo(100,15); // 绘制时针
context.moveTo(100,100);
context.lineTo(35,100); // 描边路径
context.stroke();
}

为了方便我们对路径的控制, 2D上下文还提供了一个方法

isPointInPath(x,y)  该方法用于判断(x,y)是否位于路径上,在路径关闭前有效

Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径的更多相关文章

  1. Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形

    绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...

  2. Javascript高级编程学习笔记(94)—— Canvas(11) 合成

    合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结 ...

  3. Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据

    模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat ...

  4. Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  5. Javascript高级编程学习笔记(89)—— Canvas(6) 变换

    变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...

  6. Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  7. Javascript高级编程学习笔记(85)—— Canvas(2)2D上下文

    2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x ...

  8. Javascript高级编程学习笔记(84)—— Canvas(1)基本用法

    Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...

  9. Javascript高级编程学习笔记(91)—— Canvas(8) 阴影

    阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffs ...

随机推荐

  1. python单元测试框架unittest总结

    unittest.TestCase:TestCase类,所有测试用例类继承的基本类. class BaiduTest(unittest.TestCase): TestCase类的属性如下: setUp ...

  2. cpu-z笔记本加条子

    前天:给笔记本升级能升级的东西就两个,一个内存条,一个光驱换固态硬盘,我说下升级内存 1.先将自己笔记本的型号上中关村在线查下自己的笔记本型号最大能支持多大的内存扩容 中关村在线网站:http://n ...

  3. nginx windows could not build server_names_hash, you should increase server_names_hash_bucket_size: 32

    nginx 为windows版本 在配置文件nginx.conf 的http{}段增加一行配置 server_names_hash_bucket_size 64; 如果64不够可以设128等

  4. Emacs中的拼写检查

    无论是在Emacs中写英文日记(diary).Org mode笔记,还是撰写程序的注释和文档,拼写检查都是一项提高工作效率.保证成果品质的必不可缺的工具.拼写检查对于常见的文字处理软件(如Word.L ...

  5. Keep-Alive 是什么?

    Keep-Alive 是什么? 概观 默认情况下,HTTP链接通常在请求完成之后关闭.这意味着服务端在完成响应的交付之后便关闭了TCP链接.为了让链接保持打开,来满足多请求,可以使用keep-aliv ...

  6. MYSQL水平拆分与垂直拆分

    目前很多互联网系统都存在单表数据量过大的问题,这就降低了查询速度,影响了客户体验.为了提高查询速度,我们可以优化sql语句,优化表结构和索引,不过对那些百万级千万级的数据库表,即便是优化过后,查询速度 ...

  7. ASP.NET Core快速入门学习笔记(第1章:介绍与引入)

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍 任务2:环境安装 下载地址:https://dotnet.m ...

  8. CocosCreator检测动作执行完毕的方法~之一吧,应该= =

    解决方案是利用动作序列,在动作后面跟一个回调函数,然后再利用之前设置好的动作执行完毕标志,即可完成动作结束的判断!Bingo!

  9. Spring 1 控制反转、依赖注入

    1.1 Spring的核心是控制反转(IoC)和面向切面(AOP) 学习spring之前的开发中通过new创建一个对象,有了spring之后,spring创建对象实例-IoC控制反转,之后需要实例对象 ...

  10. 将Map中的参数封装为XML

    public String packageYDImageUploadXML(String versionCode, Map parmsMap) throws ParseException { Docu ...