HTML5 canvas 绘制矩形改变矩形颜色

最新推荐文章于 2022-03-30 08:30:34 发布

猫被老鼠追着跑

最新推荐文章于 2022-03-30 08:30:34 发布

阅读量7.5k

点赞数

分类专栏： HTML5 文章标签： canvas 绘制矩形 canvas改变矩形颜色

本文链接：https://blog.csdn.net/SunmmerSoftware/article/details/51203105

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">11</canvas>
    <button id="bt">变色</button>
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script>
        $(function() {
            var ct =$("#myCanvas")[0].getContext("2d");
            ct.fillStyle="#FF0000";//绘制矩形
            var f1 = ct.fillRect(50, 50, 50, 50);
            var f2 = ct.fillRect(110, 50, 50, 50);

            $('#bt').click(function(){

                //清除填充色
                //ct.clearRect(50, 50, 50, 50);
                //重新填充颜色
                ct.rect(50, 50, 50, 50);
                ct.fillStyle="green";
                ct.fill();
            })
        })

    </script>
</body>

</html>