Canvas绘制线段和圆

最新推荐文章于 2024-09-24 22:10:23 发布

原创最新推荐文章于 2024-09-24 22:10:23 发布 · 927 阅读

0 ·

CC 4.0 BY-SA版权

=====HTML5===== 同时被 2 个专栏收录

6 篇文章

订阅专栏

Canvas

6 篇文章

订阅专栏

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

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();//实心填充放置

    //设置绘制状态
    context.beginPath();//开始
    context.moveTo(200,100);//起点
    context.lineTo(700,700);
    context.closePath();//结束并且会自动封闭图形

    context.lineWidth=5;//线条宽度
    context.strokeStyle="red";//线条样式
    context.stroke();//放在画布中
/**********************绘制圆*************************/
    //参数分别是：圆心x,y,半径r,起始弧度，终止弧度，顺时针/逆时针
    context.beginPath();//开始
    context.arc(300,300,100,0,1.5,true);
    context.closePath();//结束并且会自动封闭图形
    context.stroke();//放在画布中

</script>
</html>