标签：返回 Canvas canvas 画布 HTML5 当前 绘制 描述
Canvas画布
描述
HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须通过使用JS脚本来完成实际的绘图任务。
获取方式
获取时要检查支持性 代码:.
// An highlighted block
var canvas = document.getElementById("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
}
注意点
- canvas图像的渲染有别于HTML图像的渲染 ，canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题；
写canvas代码一定要具有同步思想 - 在获取上下文时，一定要先判断
- 画布宽高的问题
画布的默认宽高300*150
切记一定要使用HTML的attribute的形式来定义画布的高度
通过css形式定义会缩放画布内的大小 - 绘制矩形的问题
（1）边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，一旦出现小数边框都会向上取整
（2）.canvas的api只支持一种图像的直接渲染：矩形
画布API
| canvas自带属性 | 描述 |
|---|
| width | 画布的宽度 |
| height | 画布高度 |
上下文API
| 属性 | 描述 |
|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
| 方法 | 描述 |
|---|
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
| 属性 | 描述 |
|---|
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大斜接长度 |
| 方法 | 描述 |
|---|
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
| 方法 | 描述 |
|---|
| 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() | 返回包含指定文本宽度的对象 |
| 方法 | 描述 |
|---|
| drawImage() | 向画布上绘制图像、画布或视频 |
| createPattern() | 向画布上绘制图像背景 |
| 属性 | 描述 |
|---|
| width | 返回 ImageData 对象的宽度 |
| height | 返回 ImageData 对象的高度 |
| data | 返回一个对象，其包含指定的 ImageData 对象的图像数据 |
| 方法 | 描述 |
|---|
| createImageData() | 创建新的、空白的 ImageData 对象 |
| getImageData() | 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putImageData() | 把图像数据（从指定的 ImageData 对象）放回画布上 |
| 属性 | 描述 |
|---|
| globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
| 方法 | 描述 |
|---|
| save() | 保存当前环境的状态 |
| restore() | 返回之前保存过的路径状态和属性 |
| getContext() | 可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 |
| createEvent() | |
| toDataURL() | |
补充
栈结构
模板
ctx.save();//压栈
//填写样式属性
ctx.beginPath();
//填写路径方法
ctx.restore();//弹栈
- save()是Canvas 2D API通过将当前状态放入栈中，保存canvas全部状态的方法
- 保存到栈中的绘制状态有：
- 当前的变换矩阵、
- 当前的剪切区域、
- 当前的虚线列表、
- 属性的值(strokeStyle、fillStyle、lineWidth、lineCap、lineJoin…)
标签：返回,Canvas,canvas,画布,HTML5,当前,绘制,描述
来源： https://blog.csdn.net/WQH_Boss/article/details/113081518
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
