一、起步
1.获取对象获取画笔
const cnv = document.getElementById('id名')
const ctx = cnv.getContext('2d')
2.宽高问题
canvas默认宽度300px和高度150px,不能通过css设置画布的宽高!!!
二、属性
1.宽高
这个两个属性值需要传入数值
<canvas width="600" height="400"></canvas>
2.直线、折线
moveTo(x,y):起点坐标(x,y)
lineTo(x,y):下一个点的坐标(x,y)
如果x,y的值是有小数点的会导致颜色变浅,如果是画折线就是重复lineTo(x,y)
stroke():将所有坐标用一条线连起来
3.设置样式
lineWidth:线的粗细
setLineDash([]):虚线
//只传一个参数,实线和空白都是5px
cxt.setLineDash([5])
//传两个参数,实线是5px,空白10px
cxt.setLineDash([5,10])
//传三个及以上参数,实线5px,空白10px,实线15px,空白5px....
cxt.setLineDash([5,10,15])
strokeText(text,x,y,maxWidth):文本描边
text:字符串内容;x:横坐标,文本左边要对齐的坐标;y:纵坐标,文本底边要对齐的坐标;maxWidth:可选参数,文本渲染的最大宽度px,如果超过文本会被压缩
fillText(text,x,y,maxWidth):文本填充
font:设置字号等
cxt.font = '10px 宋体'//'font-style font-variant font-weight font-size/line-height font-family'
textAlign:文字水平对齐方式
start:默认,在指定位置的横坐标开始;end:在指定坐标纵坐标结束;left:左对齐;right:右对齐;center:居中对齐
textBaseline:文字垂直对齐方式
alphabetic、top、bottom、middle、hanging
strokeStyle:设置描边的属性(颜色、渐变、图案)
strokeStyle必须写在strokeRect(x,y,width,height)前面
fillStyle:设置填充的属性
fillStyle必须要写在fillRect()前面
lineCap:线帽
默认无:butt;圆形:round;方形:square
lineJoin:线条连接样式
默认尖角:miter;斜j角:bevel;圆角:round
4.新开路径beginPath()
使用beginPath()方法重新开一个路径,设置新线段的样式;这样避免多条线段样式相互污染
//第一条线
cxt.moveTo(20,10)
cxt.linTo(200,100)
cxt.linWidth = 10
cxt.strokeStyle = 'pink'
cxt.stroke()
//第二条线
cxt.beginPath()//重新开启一个路径
cxt.moveTo(10,20)
cxt.lineTo(100,200)
cxt.linWidth = 5
cxt.strokeStyle = 'green'
cxt.stroke()
5.矩形rect(x,y,width,height))
描边矩形strokeRect(x,y,width,height)
cxt.strokeStyle = 'pink'
cxt.strokeRect(10,10,100,200)
//等价于
cxt.strokeStyle = 'pink'
cxt.rect(10,10,100,200)
cxt.stroke()
填充矩形fillRect(x,y,width,height)
cxt.fillStyle = 'pink'
cxt.fillRect(10,10,100,200)
//等价于
cxt.fillStyle = 'pink'
cxt.rect(10,10,100,200)
cxt.fill()
清空矩形clearRect(x,y,width,height)
//清空画布
cxt.clearRect(0,0,cnv.width,cnv.height)
6.三角形closePath()
cxt.moveTo(10,10)
cxt.lineTo(100,10)
cxt.lineTo(100,100)
//闭合
cxt.closePath()
cxt.stroke()
7.圆、弧线arc(x,y,r,sAngle,yAngle,counterclockwise)
x和y:圆心坐标;r:半径;
sAngle:开始角度;yAngle:结束角度;//以弧度为单位Math.PI
counterclockwise:绘制方向(true:逆时针;false:顺时针)默认false
绘制圆形之前必须先调用beginPath(),在绘制完成后还需要调用closePath();绘制弧线则不需要调用closePath()
//圆形
cxt.beginPath()
cxt.arc(10,10,5,0,360)
cxt.closePath()
cxt.stroke()
//弧线
cxt.beginPath()
cxt.arc(10,10,100,0,30 * Math.PI / 180)
cxt.stroke()
8.弧线arcTo(cx,cy,x2,y2,radius)
cx:两切线交点的横坐标;cy:两切线交点的纵坐标;x2:结束点的横坐标;y2:结束点的纵坐标;radius:半径
开始点的坐标由moveTo()或者lineTo()提供
cxt.moveTo(10,10)
cxt.arcTo(20,10,20,25,30,5)
cxt.stroke()
三、图片
1.渲染图片drawImage(image,dx,dy)
image:要渲染的图片对象;dx:图片左上角的横坐标位置;dy:图片左上角纵坐标位置
//JS版
//1.创建image对象
const image = new Image()
//2.引入图片
iamge.src = './a.jpg'
//3.等待图片加载完成
iamge.onload = () => {
//4.渲染图片
cxt.drawImage(image,10,10)
}
//DOM版
<img src='./d.jpg' id='dImg' />
const image = document.getElementById('dImg')
cxt.drawImage(image,10,15)
2.设置图片宽高drawImage(image,dx,dy,dw,dh)
dw:定义图片得宽度;dy:定义图片得高度
3.截取图片drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
sx:开始截取得横坐标;sy:开始截取得纵坐标;sw:截取的宽度;sh:截取的高度