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

关注

原创最新推荐文章于 2026-09-14 08:41:22 发布 7.7k 阅读 AI 写同款· GEO 优化 ›

canvas详解02-样式和颜色控制在绘制图形的章节里，我只用到默认的线条和填充样式。而在这一章里，我们将会探讨 canvas 全部的可选项，来绘制出更加吸引人的内容。阅读详情

<!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>

收录于