javascript canvas API内容整理


Posted in Javascript onFebruary 16, 2020

HTMLCanvasElement //canvas elem对象

属性

height//高

width//宽

方法

getContext()//获取<canvas>相关的可绘制的上下文

toBlob()//(ie 不支持)此方法可以将<canvas>画布转换为base64格式的图片数据,我们可以通过设定参数指定转换的图片类型,甚至图片的清晰度

toDataURL()//可以将<canvas>画布转换为Blob对象

CanvasRenderingContext2D//等于 canvas.getContext('2d')对象;

绘制矩形

  • canvas.clearRect()//清除指定矩形区域内部所有的像素信息为初始色(通常为透明)。
  • canvas.fillRect()//矩形填充,可以填充颜色,渐变,图案等。
  • canvas.strokeRect()//矩形描边。

绘制文本

  • canvas.fillText()//文字填充,可以填充纯色,渐变或者图案。
  • canvas.strokeText()//文字描边。
  • canvas.measureText()//文字测量。返回TextMetrics对象,该对象的width属性值就是字符占据的宽度。

文本样式

  • canvas.font//设置字体相关样式,包括字号,字体信息。默认值是10px sans-serif。
  • canvas.textAlign//设置文本水平对齐方式。支持属性值有:start(默认值),end,left,right以及center。
  • canvas.textBaseline//设置文本基线对齐方式。支持属性值有:top,hanging,middle,alphabetic(默认值),ideographic,bottom。
  • canvas.direction//设置文本显示方向。支持属性值有:inherit(默认值),ltr和rtl。

填充和描边

  • canvas.fillStyle//填充样式。默认值是#000000纯黑色。
  • canvas.fill()//填充。
  • canvas.strokeStyle//描边样式。默认值是#000000纯黑色。
  • canvas.stroke()//描边。

渐变相关

  • canvas.createLinearGradient()//创建线性渐变。
  • canvas.createRadialGradient()//创建径向渐变。

图案相关

canvas.createPattern()//创建图案。图案内容可以是图片,可以是<canvas>元素,也可以是渐变。此方法返回CanvasPattern对象。

阴影相关

  • canvas.shadowBlur//阴影模糊大小。默认值是0。
  • canvas.shadowColor//阴影颜色。默认值是全透明黑色。
  • canvas.shadowOffsetX//阴影水平偏移大小。默认值是0。
  • canvas.shadowOffsetY//阴影垂直偏移大小。默认值是0。

绘制路径

  • canvas.beginPath()//开始一个新路径。
  • canvas.closePath()//闭合一个路径。
  • canvas.moveTo()//路径绘制起始点。
  • canvas.lineTo()//绘制直线到指定坐标点。
  • canvas.bezierCurveTo()//绘制贝赛尔曲线到指定坐标点。
  • canvas.quadraticCurveTo()//绘制二次贝赛尔曲线到指定坐标点。
  • canvas.arc()//绘制圆弧(包括圆)。
  • canvas.arcTo()//绘制圆弧,和之前的点以直线相连。
  • canvas.rect()//绘制矩形路径。
  • canvas.ellipse()//绘制椭圆路径。
  • canvas.clip()//创建剪裁路径,之后绘制的路径只有在里面的才会显示。

线条样式

  • canvas.lineWidth//线条宽度,主使用场景是描边,默认宽度是1.0,支持小数。
  • canvas.lineCap//线条端点的样式。支持如下属性值:butt(默认值,断头,无端帽),round(圆形端帽),square(方形端帽)。
  • canvas.lineJoin//线条转角的样式。支持如下属性值:miter(默认值,尖角),round(圆角),bevel(平角)。
  • canvas.miterLimit//尖角限制比率。线条的尖角如果没有限制,在线条粗角度小的情况下会很长很长,因此,需要一个限制比率。默认是10。
  • canvas.getLineDash()//返回当前虚线数值。返回值是一个偶数个数的数组
  • canvas.setLineDash()//设置线条为虚线。
  • canvas.lineDashOffset//设置虚线的起始偏移。

位置检测

  • canvas.isPointInPath()//当前点是否在指定路径内。
  • canvas.isPointInStroke()//当前点是否在指定路径描边上。

变换

  • canvas.rotate()//旋转。
  • canvas.scale()//缩放。
  • canvas.translate()//位移。
  • canvas.transform()//当前矩阵变换基础上再次矩阵变换。
  • canvas.setTransform()//直接重置为当前设置的矩阵变换。

透明度和层级

  • canvas.globalAlpha//全局透明度。
  • canvas.globalCompositeOperation//设置图形叠加时候的混合方式,可以用来改变绘制元素上下叠加关系,也就是层级。

图片与像素

canvas.drawImage()//图片绘制在画布上。
//drawImage 优化: 离屏绘制:
/* 上一节提到,绘制同样的一块区域,如果数据源是尺寸相仿的一张图片,那么性能会比较好,
而如果数据源是一张大图上的一部分,性能就会比较差,因为每一次绘制还包含了裁剪工作。也许,
我们可以先把待绘制的区域裁剪好,保存起来,这样每次绘制时就能轻松很多。
drawImage 方法的第一个参数不仅可以接收 Image 对象,也可以接收另一个 Canvas 对象。
而且,使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。
我们只需要实现将对象绘制在一个未插入页面的 Canvas 中,然后每一帧使用这个 Canvas 来绘制
*/
canvas.createImageData()//创建一个新的空白的ImageData对象。
canvas.getImageData()//获取Canvas画布的设定区域的ImageData对象。
canvas.putImageData()//给定的ImageData对象应用在Canvas画布上。

Canvas状态

  • Canvas状态管理几个方法。
  • canvas.save()//存储当前Canvas的状态。
  • canvas.restore()//恢复Canvas到前一次存储的状态。
  • canvas.canvas//反向识别当前上下文源自哪个HTMLCanvasElement。

其他方法

其他一些不常用的API方法。

  • canvas.drawFocusIfNeeded()//如果给定元素被聚焦,则该方法在当前路径周围绘制焦点环。
  • canvas.scrollPathIntoView()//将当前路径或给定路径滚动到视图中。

CanvasGradient

方法

addColorStop()//给渐变增加新的渐变点

ImageBitmap

属性

height//只读。是无符号长整数,表示ImageBitmap对象的CSS像素高度
width//只读。是无符号长整数,表示ImageBitmap对象的CSS像素宽度

方法

close()//处置所有与ImageBitmap关联的图形资源

ImageData

属性

data//只读。是一个包含RGBA像素信息的Uint8ClampedArray,数组中所有的值都是整数,范围是0~255
height//只读。是无符号长整数,表示ImageData对应的实际像素高度
width//只读。是无符号长整数,表示ImageData对应的实际像素宽度

TextMetrics

属性

width//只读。表示当前文本占据的CSS像素宽度

CanvasImageSource

无暴露属性,无继承方法。

CanvasPattern

无暴露属性,无继承方法。

RenderingContext

无暴露属性,无继承方法。

以上就是小编整理的全部相关内容,希望能够帮助到你。

Javascript 相关文章推荐
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
vue props 单项数据流实例分享
Feb 16 #Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 #Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 #Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 #Javascript
封装一下vue中的axios示例代码详解
Feb 16 #Javascript
Vue.js的模板语法详解
Feb 16 #Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 #Javascript
You might like
php 前一天或后一天的日期
2008/06/28 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python opencv之SURF算法示例
2018/02/24 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python内打印变量之%和f的实例
2020/02/19 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
质量安全标语
2014/06/07 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
详解Redis主从复制实践
2021/05/19 Redis
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
理解python中装饰器的作用
2021/07/21 Python