canvas一些属性

lineTo(x,y) 定义线条结束坐标

moveTo(x,y) 定义线条开始坐标

ctx.stroke();绘制空心图形

ctx.fill();填充图形把当前路径环绕起来的区域进行填充

ctx.fillStyle 填充颜色

ctx.strokeStyle 绘制图形颜色

ctx.closePath();//让图形闭合，防止锯齿

ctx.beginPath();// // 一个画布内画多个图形，放了防止重绘之前的路径，所以先把之前的路径清除掉

非零环绕原则：

a 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。

b 在路径包围的区域中，随便找一点，向外发射一条射线，
c 和所有围绕它的边相交，
d 然后开启一个计数器，从0计数，
e 如果这个射线遇到顺时针围绕，那么+1，
f 如果遇到逆时针围绕，那么-1，
g 如果最终值非0，则这块区域在路径内。
备注：基数边的区域一定在路径内。

先填充与先描边

描边的时候会占用原图形的一部分(线宽的一半)

为了让线宽符合要求，最好先填充再描边，防止填充时覆盖掉线宽的一半

ctx.fill(); ctx.stroke();

canvas在绘制线条的时候，会向左或向右偏移线宽的一半，然后进行绘制

如果线宽为奇数，边缘颜色会变浅

设置线帽样式:

ctx.lineCap='butt'、'round'、'square'

butt是默认值

round线头是圆的

square线头两段各增加线宽的一半

设置交点样式

ctx.lineJoin = ‘miter' 、'round'、'bevel'

miter是默认值，两边向外延伸相交为尖尖角，
round是圆头，
bevel两边相连为一个斜面。

内置矩形的API

ctx.rect(起点x，起点y，宽，高)

绘制一个描边矩形

ctx.strokeRect(起点x，起点y，宽，高);

绘制一个填充矩形

ctx.fillRect(起点x，起点y，宽，高);

按照矩形的大小清除画布中指定位置的内容

ctx.clearRect(起点x，起点y，宽，高);

绘制虚线

ctx.setLineDash([5,3]);设置画线的时候空白部分和实现部分的大小 5像素实线，3像素空白

画弧( 画的是路径 )

ctx.arc( 圆心x轴坐标，圆心y轴坐标，半径, 起点弧度，结束点弧度，是否逆时针画(可选) )

设置文字的属性
ctx.font = 和css语法一样。
注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。
注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
ctx.font = '2rem 微软雅黑';

绘制描边文字：
ctx.strokeText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )

ctx.strokeText( '嘻嘻嘻嘻嘻嘻', 100, 100 );

绘制填充文字：
ctx.fillText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )

ctx.fillText( '咯咯咯咯咯咯', 100, 200 );

设置文字的水平对其方式：
ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
默认值为start。

设置文字的垂直对其方式：
ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
默认值为alphabetic。

状态保存：

ctx.save();

把当前的状态(绘制环境的所有属性)copy一份进行保存。

状态回滚：
ctx.restore();
把最近保存的一次状态作为当前状态。

ctx.drawImage()
绘制图像，有三种使用方式。

第一种，三参数版本：
把图像绘制到指定的坐标。
 必须要在img图像下载完毕之后使用
img.onload = function() {
    ctx.drawImage( img, 10, 10 );
}

 第二种，五参数版本：
 把图像绘制到指定的坐标，并指定其大小。
 必须要在img图像下载完毕之后使用
img.onload = function() {
    ctx.drawImage( img, 10, 10, 200, 200 );
}
 第三种，九参数版本：
 把裁剪到的部分图像绘制到指定的坐标，并指定其大小。
 必须要在img图像下载完毕之后使用
img.onload = function() {
    ctx.drawImage( img,
            0, 0, 400, 400,
            100, 100, 400, 400 );
}

ctx.isPointInPath()判断点是否在路径内（路径必须绘制出来才可以

比如this.ctx.rect()；然后必须this.ctx.stroke()才可以

）

requestAnimationFrame

请求动画帧函数，这个函数和setTimeout方法使用类似，
他都是定时器，却别在于setTimeout可以*指定回调的触发时间，
而requestAnimationFrame函数回调的触发是由浏览器来控制的。
requestAnimationFrame( callback )
备注：当浏览器重绘页面的时候，就会调用这个callback，
这样callbackg的执行就会比较稳定，适合用来做流畅的动画。

用法:

(function con() {
console.log(111);
requestAnimationFrame( con );
}());

秒客网

canvas一些属性

相关文章