canvas中getContext(“2d“) 对象的属性和方法
HTML5中canvas标签用于绘制图像(通过脚本,通常是Js)。
也就是说,canvas元素本身没有绘制能力仅仅是图形容 - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
以下是getContext("2d") 对象的属性和方法:
一、颜色、样式和阴影
属性 | 描述 | 值 |
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式。 | 默认:#000000;color,gradient,pattern |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 。 | 同fillStyle |
shadowColor | 设置或返回用于阴影的颜色,必须shadowBlur一起 | 默认:#000000;color |
shadowBlur | 设置或返回用于阴影的模糊级别。 必须shadowColor一起 | 默认:0;number |
shadowOffsetX | 设置或返回阴影与形状的水平距离。 | 默认:0,number正负值 |
shadowOffsetY | 设置或返回阴影与形状的垂直距离。 | 默认:0,number正负值 |
方法 | 描述 | 值 |
createLinearGradient() | 创建线性渐变(用在画布内容上)。 | 参数(x1,y1,x2,y2) |
createPattern() | 在指定的方向上重复指定的元素。 | (image,"repeat|repeat-x|repeat-y|no-repeat"); |
createRadialGradient() | 创建放射状/环形的渐变(用在画布内容上) | 参数(x1,y1,r1,x2,y2,r2) |
addColorStop() | 规定渐变对象中的颜色和停止位置。 | stop:在0.0-1.0之间(stop, color) |
二、线条样式
属性 | 描述 | 值 |
lineCap | 设置或返回线条的结束端点样式 |
默认:butt:末端平直 round:圆形线帽 square:正方形线帽 |
lineJoin | 设置或返回两条线相交时,所创建的拐角类型。 |
默认:bevel:斜角 round:圆角 |
lineWidth | 设置或返回当前的线条宽度。 | number:一以像素计 |
miterLimit | 设置或返回最大斜接长度。 存在lineJoin为miter才有意义 | number:正数 |
解释斜接长度:
三、矩形
方法 | 描述 | 参数 |
rect() | 创建矩形。 | (x,y,width,height) |
fillRect() | 绘制"被填充"的矩形。默认填充色为黑色,使用fillStyle修改填充色 | (x,y,width,height) |
strokeRect() | 绘制矩形(无填充)。 默认笔触色为黑色,使用strokeStyle修改填充色 | (x,y,width,height) |
clearRect() | 在给定的矩形内清除指定的像素 | (x,y,width,height) |
四、路径
方法 | 描述 | 参数 |
fill() | 填充当前绘图(路径) ,填充颜色和fillStyle搭配使用 | 无 |
stroke() | 绘制已定义的路径。(执行) | 无 |
beginPath() | 起始一条路径,或重置当前路径。 | 无 |
moveTo() | 把路径移动到画布中的指定点,不创建线条。 | (x,y)开始坐标 |
closePath() | 创建从当前点回到起始点的路径。 | 无 |
lineTo() | 添加一个新点,然后在画布中创建从该点到最后指定点的线条。 | (x,y)结束坐标 |
clip() | 从原始画布剪切任意形状和尺寸的区域。 | 无 |
quadraticCurveTo() | 创建二次贝塞尔曲线。 |
cpx:贝塞尔控制点的x坐标 cpy:贝塞尔控制点的y坐标 x,y:结束的x,和y坐标 |
bezierCurveTo() | 创建三次贝塞尔曲线。 |
(cpx1,cpy1,cpx2,cpy2,x,y) |
arc() | 创建弧/曲线(用于创建圆形或部分圆)。 |
x,y圆心的坐标 r圆半径 sAngle:起始角 eAngle:结束角 counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
arcTo() | 创建两切线之间的弧/曲线。 |
x1,y1:第一条两切线交点的横纵坐标。 x2,y2:第二条两切线交点的横纵坐标。 r:弧半径 |
isPointInPath() | 如果指定的点位于当前路径中,则返回 true,否则返回 false。 | x,y测试坐标 |
解释二次和三次贝塞尔曲线控制点坐标:
圆参数介绍:
五、转换
方法 | 描述 | 参数 |
scale() | 缩放当前绘图至更大或更小。定位也会被缩放 | scaleWidth,scaleHeight:缩放的宽高 |
rotate() | 旋转当前绘图 | angle:以弧度计degrees*Math.PI/180 |
translate() | 重新映射画布上的 (0,0) 位置。 | x,y:横纵坐标 |
transform() | 替换绘图的当前转换矩阵。 |
a:水平缩放绘图 b: 水平倾斜绘图 c:垂直倾斜绘图 d:垂直缩放绘图 e:水平移动绘图 f:垂直移动绘图 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform()。 | 同上 |
六、文本
属性 | 描述 | 值 |
font | 设置或返回文本内容的当前字体属性 |
默认值:10px sans-serif font属性值详细参数见 HTML canvas font 属性 | 菜鸟教程 |
textAlign | 设置或返回文本内容的当前对齐方式。 | start,end,center,left,right |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线。 | alphabetic,top,hanging,middle,ideographic,bottom |
方法 | 描述 | 参数 |
fillText() | 在画布上绘制"被填充的"文本。 |
text:绘制文本 x,y:位置横纵坐标 maxWidth:可选,最大文本宽度 |
strokeText() | 在画布上绘制文本(无填充)。 | 同上 |
measureText() | 返回包含指定文本宽度的对象。 | txt |
七、绘制图像
方法 | 描述 | 参数 |
drawImage() | 向画布上绘制图像、画布或视频。 |
(img,x,y);详情参数见 HTML canvas drawImage() 方法 | 菜鸟教程 |
八、像素操作
属性 | 描述 | 值 |
width | 返回 ImageData 对象的宽度。 | |
height | 返回 ImageData 对象的高度。 | |
data | 返回一个对象,其包含指定的 ImageData 对象的图像数据。 |
![]() |
方法 | 描述 | 参数 |
createImageData() | 创建新的、空白的 ImageData 对象。 |
width:宽度 height:高度 imageData:另一个imageData对象 |
getImageData() | 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据。 |
x,y:开始复制的左上角位置的 x ,y坐标(以像素计)。 width,height:复制矩形区域的宽高 |
putImageData() | 把图像数据(从指定的 ImageData 对象)放回画布上。 |
(imgData,x,y)参数详情见 HTML canvas putImageData() 方法 | 菜鸟教程 |
九、合成
属性 | 描述 | 值 |
globalAlpha | 设置或返回绘图的当前 alpha 或透明值。 | number:0.0-1.0 |
globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上。 | 默认:source_over使用详情见HTML canvas globalCompositeOperation 属性 | 菜鸟教程 |
10、其他
以上属于学习笔记,也就是在学习的过程中把东西敲下来加深印象,具体内容请看下面链接HTML 画布 | 菜鸟教程
canvas中getContext(“2d“) 对象的属性和方法相关推荐
- HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- 细说JavaScript中对象的属性和方法
最近在回家的路上读了尼古拉斯的新书<JavaScript面向对象精要>,发现自己对对象的属性和方法不是很熟悉,特别是es5新增的部分,特写此文总结一下,同时也与大家共勉. 本文分为两部分, ...
- 理解Python中的类对象、实例对象、属性、方法
class Animal(object): # 类对象age = 0 # 公有类属性__like = None # 私有类属性def __init__(self): # 魔法方法self.name = ...
- JavaScript中的高级特性及特别对象、属性和方法
一,编写构造函数 可以使用 new 运算符结合像 Object().Date() 和 Function() 这样的预定义的构造函数来创建对象并对其初始化.面向对象的编程其强有力的特征是定义自定义 ...
- php取json子对象属性,php中输出json对象的值(实现方法)
实例如下所示: $json = '{"report":{"date":"2012-04-10","content":&q ...
- ASP.NET基础教程-DataView对象的属性、方法、枚举成员
DataView对象用于通过过滤器查看DataTable对象中的特定行.也可以排序用DataView查看的行.可以增加.修改与删除DataView中的行,这些改变也适用于DataView将从中进行读取 ...
- [置顶] 深入浅出Javascript(三)创建自定义对象以及属性、方法
怎么样创建一个对象? 利用Object创建自定义对象 JavaScript能够自定义对象来扩展程序的功能,不仅如此,它还能扩展JavaScript提供的内置对象,新增内置对象的属性或方法 例如下面代码 ...
- jQuery Event对象的属性和方法
介绍之前先介绍jQuery的一个方法 jQuery.event.fix(event || window.event); 此方法个浏览器的event对象转换为 jQuery.event; 如果您的事件是 ...
- python查看类的属性和方法_Python 获取对象的属性和方法—dir 函数
工作中,我们使用一些之前没用到过的模块,使用时需要了解一下这个模块中的一些类的方法或属性,怎么做呢?目前我比较常用的两款IDE"Pycharm"和"VSCode" ...
最新文章
- YUIDoc的使用方法小结
- Java一种错误的实例化方法:在默认无参构造函数中进行实例化
- 动作分析 姿态估计_单人或多人的人体姿态骨架估计算法概述
- 超详细前端开发案例:品优购商场项目(二)
- 设备、线程-Android音频系统之AudioFlinger(二)-by小雨
- springboot 优雅停机_Spring Boot 程序的优雅停机[译文]
- wps android 安装包下载地址,WPS Office手机版下载安装_WPS Office下载软件安卓版13.0.1...
- 卸载ps显示无法连接adobe服务器,Solved: photoshop无法卸载 - Adobe Support Community - 7692384...
- svg和css3创建环形渐变进度条
- 静态HTML网页设计作品——动漫电影《你的名字》(7页) HTML+CSS大作业_ 动漫电网页制作作业_动漫电网页设计...
- 着色Shading(2)(着色的继续、管线和纹理映射)(笔记)
- DNA-蛋白翻译过程的Python实现
- axure RP文件如何找回_u盘文件丢失怎么办 u盘文件丢失恢复方法【步骤详解】
- it行业se是_IT行业常见职位英文缩写
- excel白屏未响应_关于Excel联网状态下打开某些xls(xlsx)文件巨慢(白屏,假死) - Microsoft Community...
- OSPF虚链接的基本配置
- 计算机windows7教程,win7系统教程
- 2017百度之星初赛(B)1006小小粉丝度度熊------hdu6119
- Unity制作RPG游戏——战斗注视LockOn实现方法
- [野火]一种Cortex-M内核中的精确延时方法-ns级别-DWT