fillRect方法怎么使用
我们先来看一下fillRect的基本语法
context.fillRect(x,y,width,height);
x表示矩形左上角的 x 坐标。
y表示矩形左上角的 y 坐标。
width表示矩形的宽度。
height表示矩形的高度。
(参考:HTML5 canvas)
下面我们来看具体的示例
代码如下
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <canvas id="rectangle" width="200" height="200"></canvas> <script> // 使用JS获取canvas元素 var canvas=document.getElementById('rectangle'); // 获取canvas var c=canvas.getContext('2d'); // 在画布上绘制一个矩形 c.fillRect(50,50,100,100); </script> </body> </html>
效果如下:绘制了一个填充黑色的矩形
本篇文章到这里就全部结束了,更多有关前端的精彩内容大家可以关注教程集的其他相关栏目教程!!!
以上就是fillRect方法怎么使用的详细内容,更多请关注教程集其它相关文章!
-->您可能感兴趣的文章:
fillRect方法怎么使用
html5 Canvas实现画未闭合的路径及渐变色的填充方法
Canvas怎么使用
如何用canvas绘制矩形?canvas画矩形的两种方法介绍
html5 canvas有什么用?HTML5最新的canvas元素详解
使用HTML5 Canvas为图片填充颜色和纹理
Canvas中beginPath()和closePath()的分析总结(附示例)
电脑键盘蓝牙无法使用怎么办?笔记本蓝牙无法使用解决方法
canvas 动态图表
笔记本使用Win8.1触摸板无法缩放怎么办