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

来源:互联网 发布:家用网络弱电箱 编辑:程序博客网 时间:2024/05/21 14:50

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

0 0
原创粉丝点击