canvas绘制多边形并填充

最新推荐文章于 2024-08-30 11:04:59 发布

說好樂卟見麵

最新推荐文章于 2024-08-30 11:04:59 发布

阅读量3.5k

点赞数 1

分类专栏： js函数 canvas 文章标签： canvas

本文链接：https://blog.csdn.net/qq_41495998/article/details/103188488

版权

js函数同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

<body>
    <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
</body>

<script>
    let canvas=document.getElementById("canvas");
    canvas.width=800;  //画布宽度
    canvas.height=800; //画布高度
    let context=canvas.getContext("2d")
    canvasMonth(context,100,100,400,400,10,"#058","red");
    /**
     * canvas状态绘制机制  多边形  矩形
     * beginPath  表示从这里开始绘制
     * closePath  封闭多边形绘制结束方法
     * fill       封闭多边形填充开始方法
     * @param context  属于谁
     * @param moveToX  线条起点 X坐标 类型number
     * @param moveToY  线条起点  Y坐标 类型number
     * @param lineToX 线条终点 X坐标 类型number
     * @param lineToY 线条终点 Y坐标 类型number
     * @param lineWidth  线条宽度  类型number
     * @param strokeStyle  线条颜色  类型String
     * @param fillStyle 封闭图形颜色  类型String
     */
    function canvasMonth(context,moveToX,moveToY,lineToX,lineToY,lineWidth,strokeStyle,fillStyle){
        context.beginPath(); //清除上一次的绘制参数 开始绘制
        context.moveTo(moveToX,moveToY); //线条起点moveToX,moveToY
        context.lineTo(moveToX+lineToX,moveToY);
        context.lineTo(moveToX+lineToX,moveToY+lineToY);
        context.lineTo(moveToX,moveToY+lineToY);
        context.closePath();//封闭多边形结束方法
        context.lineWidth=lineWidth; //线条宽度
        context.fillStyle=fillStyle; //线条颜色
        context.strokeStyle=strokeStyle;//多边形填充颜色
        context.fill(); //多边形填充
        context.stroke(); //结束绘制
    }

参考链接

https://www.runoob.com/html/html5-canvas.html

說好樂卟見麵

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录