标签:相同 line nec 高度 get tco 区域 橡皮擦 cap
1、canvas 画布 - 基础
<canvas> 画布是 HTML5 新增的元素,用于图形的绘制,通过 <canvas> 标签来创建。
2、画布添加好了之后,因为它没有颜色,所以我们还可以通过CSS 样式设置画布的背景颜?。
#myCanvas {
background-color: #eee;
}
3、在 <canvas> 中绘制图形,必须先要拿到<canvas> 的上下文。就是在画图前要先拿到画
笔。这个上下文,就相当于是一个画笔。
画布元素.getContext("2d")
4、绘制矩形的方法
<canvas> 的上下文提供了四种方法绘制矩形:
绘制一个填充的矩形(填充色默认为黑色)
fillRect(x, y, width, height)
绘制一个矩形的边框(边框样式默认为 1px 的黑色实线)
strokeRect(x, y, width, height)
绘制一个既没填充也没边框的矩形
rect(x, y, width, height)
清除指定矩形区域,让清除部分完全透明(类似于橡皮擦功能)
clearRect(x, y, width, height)
注:
x 和 y :指定了在<canvas> 画布上所绘制矩形的起点(左上?)坐标。
width 和 height :设置矩形的宽高尺寸(存在边框的话)
5、清空画布
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
说明:起始位置为画布的 (0, 0) 点,清除范围的尺寸为画布效果。
6、添加样式
fillStyle :设置图形的填充颜色。
strokeStyle :设置图形的轮廓颜色。
ineWidth :设置当前绘制线的粗细(属性值必须是正数)。
lineJoin :设置线条与线条间交接处的样式(默认值为miter )。
round :圆?
bevel :斜?
miter :直?
7、绘制路径
绘制路径起点。
绘制路径终点。
连接两点绘制出线段。
绘制路径的方法
moveTo(x, y) :设置路径的起点坐标 (x, y) 。
lineTo(x, y) :设置路径的终点坐标 (x, y) 。
stroke() :连接两个点,绘制路径。
8、添加样式
lineCap :设置每一条线段两端的样式。
butt :线段两端以方形结束。
round :线段两端以圆形结束。
square :线段两端以方形结束。但是增加了一个宽度与线段相同,高度是线段宽度一半的矩形。
9、路径来绘制。
创建图形的起始点。
绘制路径的其他点。
将路径闭合。
一旦路径生成,就能通过描边或填充路径区域来渲染图形。
closePath() :<canvas> 的上下文提供了一个方法来达到闭合路径的效果。
10、填充图形
fill() :通过填充路径的内容区域生成实心的图形。
closePath() :<canvas> 提供了一个方法来达到闭合路径的效果。
标签:相同 line nec 高度 get tco 区域 橡皮擦 cap
原文地址:http://www.cnblogs.com/SummerBreezeYHC/p/7581341.html