canvas常用属性

一、起步

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：截取的高度