欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML5 在canvas中绘制矩形附效果图_html5教程技巧

程序员文章站 2022-03-28 13:35:12
...
一、绘制矩形

canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增。

使用绘图环境的矩形绘制函数来绘制矩形。

fillRect(x,y,width,height) : 绘制一个实心的矩形。
strokeRect(x,y,width,height) : 绘制一个空心的矩形。
clearRect(x,y,width,height) : 清除指定的矩形区域,使之完全透明。

二、在canvas中绘制矩形

复制代码
代码如下:






HTML5





提示:你的浏览器不支持标签




三、绘制效果
HTML5 在canvas中绘制矩形附效果图_html5教程技巧