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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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
拼音码表的生成
2006/10/09 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
php中如何执行linux命令详解
2018/11/06 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
matplotlib绘制动画代码示例
2018/01/02 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python如何实现数据的线性拟合
2019/07/19 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
浅谈Python __init__.py的作用
2020/10/28 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
餐饮营销方案
2014/02/23 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
反对邪教标语
2014/06/30 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
运输公司工作总结
2015/08/11 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server