绘制路径

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. Microsoft Graph API -----起题 Graph API

    最近因为工作需要,接触学习使用了Microsoft Graph API.在看完Microsoft的Graph官方文档之后,也做了一些简单的案例,在Stack Overflow上做过一些回答.整体来说, ...

  2. UGUI中粒子特效与UI的遮挡问题

    问题背景: 在做主线任务时发现完成任务后的特效显示穿透上面的UI层,不美观,策划不乐意了,抓紧解决下 解决思路: 首先讲下影响渲染顺序的因素: 能够影响渲染顺序的因素有:1.Camera Depth  ...

  3. mongodb基本的配置和使用

    一.连接配置,使用自动配置方式,在applicaiton.properties中配置连接信息即可 spring.data.mongodb.host=127.0.0.1 //连接地址 spring.da ...

  4. C#通过文件路径获取文件名小技巧

    string fullPath = @"\WebSite1\Default.aspx"; string filename = System.IO.Path.GetFileName( ...

  5. 基于Filebeat+Kafka+Flink仿天猫双11实时交易额

    1. 写在前面 在大数据实时计算方向,天猫双11的实时交易额是最具权威性的,当然技术架构也是相当复杂的,不是本篇博客的简单实现,因为天猫双11的数据是多维度多系统,实时粒度更微小的.当然在技术的总体架 ...

  6. C# Post方式下,取得其它端传过来的数据

    // Post方式下,取得java端传过来的数据 if ("post".Equals(context.Request.HttpMethod.ToLower())) { contex ...

  7. nginx 将请求全部指向到一个页面

    个人需要,所以试写了下,使用的是nginx. 文件目录 --------------------- 作者:z8853797 来源:CSDN 原文:https://blog.csdn.net/z8853 ...

  8. 记一次完整的asp.net-mvc页面优化过程

    最近在重构一个以前团队开发留下的MVC项目,项目结构堪称混乱,问题多多,但今天说的是页面打开速度的问题.项目中包括web后台系统,几乎随便点一个页面都要盯着白屏等待2-5秒之久,体验很差.通过对页面性 ...

  9. Codeforces 677E Vanya and Balloons

    Vanya and Balloons 枚举中心去更新答案, 数字过大用log去比较, 斜着的旋转一下坐标, 然后我旋出来好多bug.... #include<bits/stdc++.h> ...

  10. 难受的ESlint语法检测

    相信写过vue的各位小白都有过这样的体验,明明引入的文件语法是对的,明明自己写的代码是对的,但是总会报语法错误,没错,就是ESlint代码检测搞的鬼, 就算你在注释后面多打一个空格,它都会去搞事情,简 ...