首页客户案例企业网站建设外贸独立站SEO优化小程序+APP开发自媒体运营关于曲德曲最新动态联系咨询

HTML5 Canvas中绘制矩形实例教程

知识分享由:快连官网


让我们来看一下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进制字符串表示)。

本文来源于上海网站建设公司与上海网站设计制作公司-广帆互动上海公司!

日期:2015年07月05日

标签: 上海网站设计公司 、 上海网站设计 、 上海网站建设公司 、 上海网站建设 、 上海网站制作公司 、 上海网站制作 、 高端网站设计 、 高端网站建设 、 上海高端网站设计 、 上海高端网站建设

获取您的项目定制及优化报价。

* 为上海天河、金山工业、海珠、番禺、花都、南沙区提供网站建设服务。
微信二维码021-888666999免费获取诊断报告