canvas基础

Posted 2020-08-13 程序猿1990

什么是canvas?canvas就是html5中提供的一个标签，主要的作用：用来展示通过javascript中提供的绘图API来绘制的内容,canvas的默认宽高为300*150px,IE9以上的浏览器才支持canvas标签
设置canvas的宽高不能使用css方式来设置,不管行内还是内嵌式都不可以,因为canvas画布的内容是通过像素点展示出来的.css样式(或者通过JS中的style设置)来设置宽高,实际上只是改变了画布大小,但是画布内的像素点没有改变,所以看到的线粗细不是真实的.
设置canvas的宽高可以用HTML属性或者DOM属性来设置,通过这两种方式设置能改变画布内的像素点,html方式<canvas width="600" height="400"></canvas>
canvas绘图的步骤:1.在页面中必须获取到一个canvas标签
JS----var cv = document.getElementById(‘cv‘);
cv.width = 600;
cv.height = 400;
2.拿到canvas绘图的上下文
var ctx=cv.getContext("2d");表示2d效果,即平面(ctx是CanvasRenderingContext2D 类型的对象)
var ctx=cv.getContext("webgl");表示3d效果
3.选择要绘制的工具(绘制API,其实就是一系列的方法)
4.将绘图工具移到canvas画布中的某个位置,绘制路径
ctx.moveTo(x方向坐标,y方向坐标);起点
ctx.lineTo(x方向坐标,y方向坐标);起点到这个点绘制直线
5.绘制选择的图形
ctx.stroke();描边,这一步真正将内容绘制到画布中
ctx.fill();填充,将闭合的路径的内容填充具体颜色,默认黑色,如果所有的描点没有构成封闭结构,也会自动构成一个封闭图形,会将最后一个点和起点连接

使用ctx.fillStyle="red";ctx.strokeStyle="red";改变颜色,可以接受的属性有颜色的英文,rga,rgba,十六进制
非零环绕原则:从要判断的区域往外拉一根线,每个交点是顺时针+1,逆时针-1,最后如果为0,就不填充,反之在调用fill()方法时，浏览器就会对其进行填充

开始路径和闭合路径ctx.beginPath();ctx.closePath();
如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起
beginPath: 核心的作用是将 不同绘制的形态进行隔离， 每次执行此方法，表示重新绘制一个路径,跟之前的绘制的路径可以进行分开样式设置和管理。canvas是基于状态的绘图,beginPath是开启了一个绘图状态,状态:包含当前与当前绘制相关的属性,如:颜色.线宽等.这个方法, 仅仅是开启一个新的路径, 如果没有开启,canvas会自动的开启一个默认的路径,路径跟状态之间没有联系.从一开始设置的状态, 如果后续没有改变过这些状态, 那么在以后的绘图中,就会被一直继承下去!如果不想去继承上一次的状态,只需要重新设置当前的状态即可!
当设置多个ctx.stroke()或者ctx.fill()时需要用beginPath进行重新开启路径,不然前面的会被多次绘制
closePath闭合路径,相当于在起点和终点绘制一条线

使用canvas设置线宽需要注意,如果设置的是偶数,向上向下扩展的宽度为设置宽度的一半,此时绘制的线宽高就是设置的值;如果设置的是奇数,向上向下扩展的宽度也需要为设置宽度的一半,但是屏幕分辩率的最小单位就是像素,会将设置值自动加1,从而使上下的大小一样,此时线的最上面和最下面1px的颜色会比正常颜色淡

设置线帽
ctx.lineCap="butt";默认值
ctx.lineCap="round";圆角的线帽
ctx.lineCap="square";方形的线帽
设置不同方向两根线连接处的样式
ctx.lineJoin="miter";默认尖角
ctx.lineJoin="round";圆角
ctx.lineJoin="bevel";斜角

斜接长度miterLimit:是指两条线交汇处内角和外角之间的距离,一般默认值10就可以了,除非需要特别长的尖角时用此属性,当实际长度小于最大值时使用实际长度,当实际长度小于最大值时使用最大值

绘制虚线:
设置ctx.setLineDash([])需要用数组的方式来设置
获取getLineDash();得到的是一个数组,数组的长度是设置的数组长度和2(虚线中的直线和空白两部分)的最小公约数-------(设置了一个5个数的数组,那么就是5个数循环到实线和空白部分,获取到的数组长度就是10)