canvas之画矩形

最新推荐文章于 2024-03-27 21:00:16 发布

会做饭的技术男

最新推荐文章于 2024-03-27 21:00:16 发布

阅读量171

点赞数 1

分类专栏：前端文章标签： javascript html js web web前端前端 html5 xml

原文链接：https://www.mk2048.com/blog/blog.php?id=h1ia0jabj2ib&title=canvas%E4%B9%8B%E7%94%BB%E7%9F%A9%E5%BD%A2

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

1 <canvas id="canvas" width="600" height="500" style="background-color: yellow"></canvas>

 1  var canvas=document.getElementById("canvas");
 2     var cxt=canvas.getContext("2d");
 3     cxt.beginPath();
 4     cxt.rect(100,20,100,100);
 5     cxt.stroke();//空心矩形
 6     cxt.closePath();
 7     //其他画法
 8     cxt.beginPath();
 9     cxt.strokeRect(100,150,100,100);//这个方法相当于rect()和stroke()组合
10     cxt.closePath();
11 
12     //实心矩形
13     cxt.beginPath();
14     cxt.rect(100,270,100,100);
15     cxt.fill();
16     cxt.closePath();
17     //其他方法
18     cxt.beginPath();
19     cxt.fillStyle="red";//填充颜色
20     cxt.fillRect(100,390,100,100);//实心矩形
21     cxt.closePath();