2.3_矩形的绘制

来源:互联网 发布:尚学堂大数据课表 编辑:程序博客网 时间:2024/06/05 10:08

2.3_矩形的绘制

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>矩形的绘制</title>        <style>            body{                background: #000;            }            #canvas{                background: #fff;            }        </style>    </head>    <body>        <canvas id="canvas" width="1000" height="600"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas'),            context = canvas.getContext('2d');            context.lineJoin = 'round';            context.lineWidth = 30;            context.font = '24px Helvetica';            context.fillText('Click anywhere to erase', 175,40);            context.strokeRect(75,100,200,200);            context.fillRect(325,100,200,200);            context.canvas.onmousedown = function(e){                context.clearRect(0,0,canvas.width,canvas.height);            }    </script></html>
0 0
原创粉丝点击