javascript canvas API内容整理

2024-05-06 15:44:32

字体：大中小

来源：转载

供稿：网友

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()//创建剪裁路径，之后绘制的路径只有在里面的才会显示。

上一篇：封装一下vue中的axios示例代码详解

下一篇：JS通用方法触发点击事件代码实例