Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径
绘制路径
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)绘制路径的更多相关文章
- Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形
绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...
- Javascript高级编程学习笔记(94)—— Canvas(11) 合成
合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结 ...
- Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据
模式 模式其实就是重复的图像,用来填充或描边图形 要创建一个新模式,可以调用 createPattern()并传入两个参数 一个HTML img元素 用于表示如何重复的字符串 "repeat ...
- Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像
绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...
- Javascript高级编程学习笔记(89)—— Canvas(6) 变换
变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- Javascript高级编程学习笔记(85)—— Canvas(2)2D上下文
2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x ...
- Javascript高级编程学习笔记(84)—— Canvas(1)基本用法
Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...
- Javascript高级编程学习笔记(91)—— Canvas(8) 阴影
阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffs ...
随机推荐
- Microsoft Graph API -----起题 Graph API
最近因为工作需要,接触学习使用了Microsoft Graph API.在看完Microsoft的Graph官方文档之后,也做了一些简单的案例,在Stack Overflow上做过一些回答.整体来说, ...
- UGUI中粒子特效与UI的遮挡问题
问题背景: 在做主线任务时发现完成任务后的特效显示穿透上面的UI层,不美观,策划不乐意了,抓紧解决下 解决思路: 首先讲下影响渲染顺序的因素: 能够影响渲染顺序的因素有:1.Camera Depth ...
- mongodb基本的配置和使用
一.连接配置,使用自动配置方式,在applicaiton.properties中配置连接信息即可 spring.data.mongodb.host=127.0.0.1 //连接地址 spring.da ...
- C#通过文件路径获取文件名小技巧
string fullPath = @"\WebSite1\Default.aspx"; string filename = System.IO.Path.GetFileName( ...
- 基于Filebeat+Kafka+Flink仿天猫双11实时交易额
1. 写在前面 在大数据实时计算方向,天猫双11的实时交易额是最具权威性的,当然技术架构也是相当复杂的,不是本篇博客的简单实现,因为天猫双11的数据是多维度多系统,实时粒度更微小的.当然在技术的总体架 ...
- C# Post方式下,取得其它端传过来的数据
// Post方式下,取得java端传过来的数据 if ("post".Equals(context.Request.HttpMethod.ToLower())) { contex ...
- nginx 将请求全部指向到一个页面
个人需要,所以试写了下,使用的是nginx. 文件目录 --------------------- 作者:z8853797 来源:CSDN 原文:https://blog.csdn.net/z8853 ...
- 记一次完整的asp.net-mvc页面优化过程
最近在重构一个以前团队开发留下的MVC项目,项目结构堪称混乱,问题多多,但今天说的是页面打开速度的问题.项目中包括web后台系统,几乎随便点一个页面都要盯着白屏等待2-5秒之久,体验很差.通过对页面性 ...
- Codeforces 677E Vanya and Balloons
Vanya and Balloons 枚举中心去更新答案, 数字过大用log去比较, 斜着的旋转一下坐标, 然后我旋出来好多bug.... #include<bits/stdc++.h> ...
- 难受的ESlint语法检测
相信写过vue的各位小白都有过这样的体验,明明引入的文件语法是对的,明明自己写的代码是对的,但是总会报语法错误,没错,就是ESlint代码检测搞的鬼, 就算你在注释后面多打一个空格,它都会去搞事情,简 ...