canvas简介和常用的API

目录

 

canvas简介

canvas和SVG的区别

canvas API

canvas主要属性与方法

颜色、样式和阴影的属性

颜色、样式和阴影的方法

线条样式

矩形方法

路径方法

转换

绘制

图像、合成

像素操作

---

 

canvas简介

是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以绘制 图形(矩形、曲线、圆)、图表、动画、游戏开发等。
有些浏览器不支持canvas，要想有良好的用户体验，可以在canvas标签中填写替换内容。比如：您的浏览器不支持canvas。这样canvas不能正常渲染的时候，就会出现替代内容。
以下是支持 元素的第一个浏览器版本号。

Google	IE	Firefox	Safari	Opera
4.0	9.0	2.0	3.1	9.0

canvas和SVG的区别

canvas	SVG
canvas绘图 使用JavaScript 动态生成	使用xml静态描述
基于位图 ，不能随意放大缩小（会失真）	基于矢量（公式）， 不失真
修改后重绘	修改后不需要重绘

canvas API

canvas主要属性与方法

方法	说明
save()	从dataTransfer对象取出数据
restore()	在dragstart事件调用此函数，在dataTransfer对象中存储此对象
createEvent()	清除DataTransfer对象中数据。如果省略参数则表示清除全部数据
getContext（）	返回一个对象，指出访问绘图功能必要的API
toDataURL(image,x,y)	返回canvas图像的url

颜色、样式和阴影的属性

属性	说明
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle	设置或返回用于笔触的颜色、渐变或模式。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回用于阴影的颜色。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。

颜色、样式和阴影的方法

方法	说明
createLinearGradient()	创建线性渐变（用在画布内容上）。
createPattern()	在指定的方向上重复指定的元素。
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）。
addColorStop()	规定渐变对象中的颜色和停止位置。

线条样式

属性	说明
lineCap	设置或返回线条的结束端点样式。
lineJoin	设置或返回两条线相交时，所创建的拐角类型。
lineWidth	创建放射状/环形的渐变（用在画布内容上）。
miterLimit	设置或返回最大斜接长度。

矩形方法

• 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径(path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

方法	说明
fillRect(x, y, width, height)	绘制一个填充的矩形
strokeRect(x, y, width, height)	绘制一个矩形的边框
clearRect(x, y, widh, height)	清除指定的矩形区域，然后这块区域会变的完全透明。
rect(x, y, widh, height)	创建矩形

路径方法

方法	说明
fill()	填充当前绘图（路径）。
stroke()	绘制已定义的路径。
beginPath()	起始一条路径，或重置当前路径。
moveTo()	把路径移动到画布中的指定点，不创建线条。
closePath()	创建从当前点回到起始点的路径。
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条。
clip()	从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo()	创建二次贝塞尔曲线。
bezierCurveTo()	创建三次贝塞尔曲线。
arc() 创建弧/曲线	（用于创建圆形或部分圆）。
arcTo()	创建两切线之间的弧/曲线。
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false。

转换

方法	说明
scale()	缩放当前绘图至更大或更小。
rotate()	旋转当前绘图。
translate()	重新映射画布上的 (0,0) 位置。
transform()	替换绘图的当前转换矩阵。
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()。

绘制

属性	说明
font	设置或返回文本内容的当前字体属性。
textAlign	设置或返回文本内容的当前对齐方式。
textBaseline	设置或返回在绘制文本时使用的当前文本基线。

方法	说明
fillText()	在画布上绘制"被填充的"文本。
strokeText()	在画布上绘制文本（无填充）。
measureText()	返回包含指定文本宽度的对象。

图像、合成

属性	说明
globalAlpha	设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上。

方法	说明
drawImage()	向画布上绘制图像、画布或视频。

像素操作

属性	说明
width	返回 ImageData 对象的宽度。
height	返回 ImageData 对象的高度。
data	返回一个对象，其包含指定的 ImageData 对象的图像数据。

方法	说明
createImageData()	创建新的、空白的 ImageData 对象。
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上。

制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！