css画布（0715）

最新推荐文章于 2024-03-16 21:53:03 发布

爱敲代码的斯蒂芬

最新推荐文章于 2024-03-16 21:53:03 发布

阅读量885

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_71439967/article/details/125803258

版权

本文详细介绍了如何使用CSS的canvas标签进行图形绘制，包括直线、虚线、三角形、矩形和圆等基本形状的创建，以及线条样式如虚线的实现方法。此外，还展示了如何通过坐标调整绘制复杂形状，例如S形。

摘要由CSDN通过智能技术生成

canvas：是一个画布标签默认情况下在网页上是一块空白区域默认大小为300*150

画布使用的步骤：

使用canvas标签 (只有浏览器版本过低时才会显示里面的文字)

直线：

<canvas id="canvas" width="500" height="500">您的浏览器版本太低，不支持画布，请更新浏览器</canvas>
       <script type="text/javascript">
           //1获取一个画布(要创建一个画布对象)
           var canvas=document.getElementById("canvas");
           //2.创建一个画布上下文对象
           var context=canvas.getContext("2d");
           //3.告诉程序绘画路径开始
           context.beginPath();
           //4.绘画图形的起始点(坐标)
           context.moveTo(100,0); （x,y）
           //5.绘画图形的连接点
           context.lineTo(100,100); (x,y)
           // 关闭绘画(从起始点到连接点连接)
           context.closePath();
           //6.设置图形的样式(这里是边框颜色)
           context.strokeStyle="orange";
           //7.描边
           context.stroke();
       </script>

运行效果：

虚线(两种方法)

方法1：

通过for循环设置多个小线条然后通过控制每个线条的坐标组成一条虚线

<canvas id="canvas" width="500" height="500">您的浏览器版本太低，不支持画布，请更新浏览器</canvas>
       <script type="text/javascript">
           //1获取一个画布(要创建一个画布对象)
           var canvas = document.getElementById("canvas");
           //2.创建一个画布上下文对象
           var context = canvas.getContext("2d");
           //调用一个画矩形的函数fillRect(x,y,width,height)
           context.lineWidth = "3"; //线的粗细
           context.beginPath();
           for (