canvas分享

 

一，简单介绍

canvas 是一种前端可视化的基础技术，生成画布一个元素，适合数据量大的场景

注意： canvas 有 默认的 宽度(300px) 和 高度(150px)，设置通过 width 和 height 属性，通过css更改是对其拉伸不是实际像素大小。

 

二，坐标系

使用的是 W3C 坐标系

 

 

三，绘图api

　1，线、折线或者多边形(宽度大于1会存在闭合问题)

 

 cxt.moveTo(x1, y1)  // 起点坐标（x1, y1）
 cxt.lineTo(x2, y2)  // 下一个点坐标（x2, y2） 
 cxt.lineWidth = 1 // 默认宽度是1 
 cxt.strokeStyle = '#314ea7' // 线条颜色：默认黑色 
 cxt.stroke() // 连接点 
 cxt.lineCap = 'round' // 线条两端样式：默认: butt; 圆形: round; 方形: square
 // 多边形需要结束点lineTo起始坐标 

 

 

2，矩形

 

 

context.rect(x,y,width,height);
// x 矩形左上角的 x 坐标
// y 矩形左上角的 y 坐标
// width 矩形的宽度
// height 矩形的高度
 
cxt.fillStyle = 'pink'
cxt.rect(50, 50, 200, 100) // 填充矩形
cxt.fill()
 
// 或者
cxt.fillStyle = 'pink'
cxt.fillRect(50, 50, 200, 200) // 填充矩形
 
// 清空矩形
cxt.clearRect(60, 60, 180, 90)
 
// 清空canvas画布
cxt.clearRect(0, 0, cnv.width, cnv.height)

 

3，多边形

 

cxt.moveTo(50, 50)
cxt.lineTo(200, 50)
cxt.lineTo(200, 200)
 
// 手动闭合
cxt.closePath()
 
cxt.lineJoin = 'miter' // 线条连接的样式。miter: 默认; bevel: 斜面; round: 圆角
 
cxt.lineWidth = 20
 
cxt.stroke()

 

4，圆形、弧线

 

arc(x, y, r, sAngle, eAngle，counterclockwise)
// x 和 y: 圆心坐标
// r: 半径
// sAngle: 开始角度
// eAngle: 结束角度
// counterclockwise: 绘制方向（true: 逆时针; false: 顺时针），默认 false
 
cxt.arc(150, 150, 80, 0, 360 * Math.PI / 180)
 
cxt.closePath()
cxt.stroke()

 

 

5，文字（绘制文字的时候，默认是以文字的左下角作为参考点进行绘制）

 

cxt.font = '10px Microsoft YaHei' // 字体样式
 
cxt.fillStyle = 'white' // 颜色
 
cxt.fillText('早', x, y) // 文本、坐标
 
cxt.measureText('hello').width // 获取文本宽度
 
cxt.textAlign = 'start' // 对齐方式，针对初始开始边界到定位点
// left\right\end\center

 

6，图片

drawImage(image, x, y)
// image: 要渲染的图片对象
// x: 图片左上角的横坐标位置
// y: 图片左上角的纵坐标位置
 
const image = new Image() // 创建 Image 对象
 
image.src = 'img.jpg'// 引入图片
 
// 等待图片加载完成
 
image.onload = () => {
cxt.drawImage(image, 30, 30) // 使用 drawImage() 方法渲染图片
}

 

四、事件交互

canvas是一个画布,是对其进行监听，一般是通过鼠标事件、键盘事件 ： click、dbclick、mousedowm、mouseup、mousemove等

过程：通过clientX、clientY 属性确定鼠标当前得位置，计算画布内容在文档中得偏移距离，最终确认鼠标位置在画布中得相对位置，找到对应元素。