新资讯：canvas分享

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

新资讯：canvas分享

2022-12-11 11:19:42 来源：博客园

(资料图)

一，简单介绍canvas 是一种前端可视化的基础技术，生成画布一个元素，适合数据量大的场景注意： canvas 有默认的宽度(300px) 和高度(150px)，设置通过 width 和 height 属性，通过css更改是对其拉伸不是实际像素大小。二，坐标系使用的是 W3C 坐标系三，绘图api1，线、折线或者多边形(宽度大于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 属性确定鼠标当前得位置，计算画布内容在文档中得偏移距离，最终确认鼠标位置在画布中得相对位置，找到对应元素。

关键词：填充矩形使用的是对齐方式