2024年大数据最新CSS基础12-canvas_canvas css(1)

最新推荐文章于 2024-08-04 17:09:52 发布

2401_84181286

最新推荐文章于 2024-08-04 17:09:52 发布

阅读量33

点赞数 30

分类专栏：程序员文章标签： css 前端

本文链接：https://blog.csdn.net/2401_84181286/article/details/138399518

版权

本文详细介绍了如何使用HTML5的CanvasAPI进行基本图形绘制，如线条、矩形、圆、文字，以及阴影、渐变、位移和保存操作。同时涵盖了饼状图、帧动画等实例，适合初学者和进阶开发者参考。

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

通过const cvs = document.querySelector(‘canvas’)拿到DOM元素
通过const ctx = cvs.getcontext(“2d”)拿到CanvasRenderingContext2D的类型对象
开启一条路径ctx.beginPath()
开始位置ctx.moveTo(x,y)
结束位置ctx.lineTo(x,y)
进行上色ctx.stroke()
关闭路径ctx.closePath()
设置绘线的粗细ctx.lineWidth，默认值为1.0
设置线段端点显示的样子，butt，round 和 square

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
 canvas{
 margin: 0 auto;
 border: 1px solid #000;
 display: block;
 }
 </style>
</head>
<body>
    <canvas width="500" height="500"></canvas>
    <script>
 const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
 // 画虚线
 for (let i = 0; i < 20; i++) {
 drawLine(100+10\*i,100,105+10\*i,100,'green',2)
 }
 
 function drawLine(x1,y1,x2,y2,color,width){
 ctx.beginPath();
 ctx.moveTo(x1,y1);
 ctx.lineTo(x2,y2);
 ctx.strokeStyle=color;
 ctx.lineWidth=width;
 ctx.stroke();
 ctx.closePath();
 }
 </script>
</body>
</html>