Canvas绘制线段和圆

最新推荐文章于 2024-01-12 13:42:08 发布

PaigeWw

最新推荐文章于 2024-01-12 13:42:08 发布

阅读量873

点赞数

分类专栏： =====HTML5===== Canvas

本文链接：https://blog.csdn.net/u013899738/article/details/51418164

版权

这篇博客介绍了如何使用HTML5 Canvas元素进行图形绘制，包括设置绘制状态、绘制直线和圆。通过示例代码展示了如何使用beginPath、moveTo、lineTo、arc等方法创建直线路径和圆形，并设置了线条宽度、颜色以及填充样式。

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

Canvas
<canvas id="canvas"></canvas>
默认 300px*150px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa;display: block;margin: 50px auto"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var context=canvas.getContext("2d");

    /*****************************绘制直线******************************/
    //设置绘制状态
    context.beginPath();//开始
    context.moveTo(100,100);//起点
    context.lineTo(700,700);
    context.lineTo(100,700);
    context.lineTo(100,100);
    context.closePath();//结束

    context.lineWidth=5;
    context.fillStyle="rgb(2,10,30)"
    context.fill();//实心填