HTML5 Canvas中绘制矩形实例


Posted in HTML / CSS onJanuary 01, 2015

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”.

让我们来看一下Canvas内置的简单几何图形 — 矩形的绘制。在Canvas中,绘制矩形有三种方法:填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然,我们也可以使用“路径”来描绘包括矩形在内的所有图形。

以下是上述三种方法的API:

1.fillRect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的实心矩形。
2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。
3.clearRect(x,y,width,height)。清除从(x,y)开始,宽度为width,高度为height的矩形区域,使之完全透明。

在调用上述方法绘制Canvas之前,我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子:

复制代码
代码如下:

context.fillStyle = "#000000";
context.strokeStyle = "#ff00ff";

在下面的例子中,填充色设定为黑色,而描边色则设定为紫色:
复制代码
代码如下:

function drawScreen() {
context.fillStyle = "#000000";
context.strokeStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40);
context.strokeRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

代码执行结果如下图所示:

HTML5 Canvas中绘制矩形实例

HTML / CSS 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 #HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 #HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 #HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
浅谈html5 响应式布局
Dec 24 #HTML / CSS
HTML5进度条特效
Dec 18 #HTML / CSS
You might like
php中filter_input函数用法分析
2014/11/15 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
javascript创建对象的3种方法
2016/11/02 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python正则表达式和re库知识点总结
2019/02/11 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python中return函数返回值实例用法
2020/11/19 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
酒店员工培训方案
2014/06/02 职场文书
老公保证书
2015/01/17 职场文书
会议主持人开场白台词
2015/05/28 职场文书
交通安全教育心得体会
2016/01/15 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
利用Python实现模拟登录知乎
2022/05/25 Python