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 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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基础学习笔记
2007/03/18 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python:slice与indices的用法
2019/11/25 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Pycharm github配置实现过程图解
2020/10/13 Python
服务员自我评价
2014/01/25 职场文书
文明村创建实施方案
2014/03/27 职场文书
小学运动会班级口号
2014/06/09 职场文书
爱情保证书
2015/01/17 职场文书
云台山导游词
2015/02/03 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
浅谈JavaScript作用域
2021/12/06 Javascript
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
Python中tqdm的使用和例子
2022/09/23 Python