画布canvas-Toy模板网

这篇具有很好参考价值的文章主要介绍了画布canvas。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天讲解一下画布canvas，canvas是ArkUI开发框架里的画布组件，常用于自定义绘制图形。因为其轻量、灵活、高效等优点，被广泛应用于UI界面开发中。先看一下思维导图一.介绍

canvas是HTML5重要元素，不需要外部插件支持，为我们提供了强大的图形处理功能，常用于移动端web的开发。canvas是一个标签在body中直接书写即可，且在css内部样式中不能修改画布的宽度，高度。

1.获取画布：var canvas=document.querySelector('canvas')

2.获取画笔：var ctx=canvas.getContext('2d')

在获取完画布以及画笔之后，就准备开始画画了，通过beginPath（）；声明开始绘制，moveTo（x，y）；设置绘制起点。这个起点意味着笔从哪个点开始画。lineTo（x，y）设置下一个点。设置完写一句closePath（）代表我们画完了，停止绘制。

3.绘制直线 ctx.beginPath（）开始绘制 ctx.moveTo（0，0）设置起点。ctx.lineTo（100，100）设置下一个点。 ctx.closePath（）结束绘制。ctx.stroke()描边绘制 ctx.strokeStyle描边颜色。

4.绘制矩形 ctx.strokeRect(x,y,width,height) 描边绘制矩形

ctx.fillRect(x,y,width,height)填充绘制矩形

5.绘制弧线 ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise) x/y圆心坐标，radius半径

startAngle/endAngle确定起点/终点位置 anticclockwise 是否逆时针 ctx.lineWidth线宽

function be3() {

ctx.beginPath();

ctx.moveTo(200, 200);

ctx.bezierCurveTo(50, 100, 70, 300, 200, 350);

ctx.fillStyle = 'red';

ctx.fill();

ctx.beginPath();

ctx.moveTo(200, 200);

ctx.bezierCurveTo(350, 100, 330, 300, 200, 350);

ctx.fillStyle = 'red';

ctx.fill();

}

be3();

画布canvas

文章来源地址https://www.toymoban.com/news/detail-410853.html

到了这里，关于画布canvas的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！